Question

有谁知道如何解决此问题？我正在尝试通过点击它们来滑动位于粘性页脚中的链接（导航菜单）。它没有幻灯片效果，但是当我将属性更改为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>

Answer 1

Hey Anita你在找这样的东西吗？

检查一下 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'));
});

jQuery slideUp效果问题

1 个答案: