1

有谁知道如何解决这个问题？我正在尝试通过单击它们来向上滑动位于粘性页脚中的链接（导航菜单）。它在没有幻灯片效果的情况下效果很好，但是当我将属性更改为 slideUp('slow') 时，它不能完全工作！任何建议将不胜感激！我只是无法理解这一点。先感谢您 ：）

这是我的代码：

$(document).ready(function(){

  $('#link_2').click(function(){
    $('#div_1').hide();
    $('#div_2').show();
   });
  $('#link_1').click(function(){ 
     $('#div_2').hide();
     $('#div_1').show();
 }); 
  $('#link_3').click(function(){ 
     $('#div_2'),$('#div_1').hide();
     $('#div_3').show();
  }); 
$('#link_4').click(function(){ 
  $('#div_2')$('#div_1')$('#div_3').hide();
  $('#div_4').show();
  }); 
  });

CSS：

#div_1{
    width: 100%;
    height: 600px;
    background-color: yellow;
    display: block;
}
#div_2 {
    width: 100%;
    height:600px;
    background-color: red;
    display: block;
    }
#div_3 {
    width: 100%;
    height:600px;
    background-color: blue;
    display: block;
    }
#div_4 {
    width: 100%;
    height:600px;
    background-color: grey;
    display: block;
    }


 footer{
        position:fixed;
        bottom:0;
        height: 30px; 
        width:100%;
        background: green;
     }

html

     <div id="div_1"> Content1 </div>
     <div id="div_2"> Content2 </div>
     <div id="div_3"> Content3 </div>
     <div id="div_4"> Content4 </div>

     <footer>
     <a href="#div_1" id="link_1">Press me</a>
     <a href="#div_2" id="link_2">Press me</a>
     <a href="#div_3" id="link_3">Press me</a>
     <a href="#div_4" id="link_4">Press me</a>
     </footer>
4

1 回答 1

0

嘿，安妮塔，你在找这样的东西吗？

在jsfiddle上检查它 

function scrollToElement(element) {
    $('html,body').animate({
        scrollTop: element.offset().top
    }, 1000);
}

$('#link_1').on('click', function(){
    scrollToElement($('#div_1'));
});

$('#link_2').on('click', function(){
    scrollToElement($('#div_2'));
});

$('#link_3').on('click', function(){
    scrollToElement($('#div_3'));
});

$('#link_4').on('click', function(){
    scrollToElement($('#div_4'));
});
于 2013-10-25T11:19:30.613 回答