JQuery Animate ScrollTop不起作用

问题描述：

我试图让页面向下滚动到'.block3'点击绿色块。我在这里错过了什么？我似乎无法得到它的工作，我没有运气检查类似的线程。JQuery Animate ScrollTop不起作用

$(document).ready(function() { 
 
    $('.down').click(function() { 
 
    alert("y no work?"); 
 
    $('html', 'body').animate({ 
 
     scrollTop: $('.block3').offset().top 
 
    }, 800, "easeOutQuart"); 
 
    }); 
 
});

.down { 
 
    background: green; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.block1,.block2,.block3 { 
 
    background: red; 
 
    width: 200px; 
 
    height: 600px; 
 
    margin: 1em 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="down"></div> 
 
<div class="block1"></div> 
 
<div class="block2"></div> 
 
<div class="block3"></div>

答

问题是selector。您一次只能滚动一个元素。而为了缓解你需要额外的库。

我注意到你的卷轴没有达到最后。我相信这是缩进

$(document).ready(function() { 
 

 
\t $('.down').click(function() { 
 
\t \t $('body').animate({scrollTop:$('.block3').offset().top}, 800, 'linear'); 
 
\t }); 
 
    
 
});

.down {background:green; width:50px; height:50px; } 
 
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="down"></div> 
 

 
<div class="block1"></div> 
 

 
<div class="block2"></div> 
 

 
<div class="block3"></div>

答

试试这个：

必须用逗号单独的每个选择。

$(document).ready(function() { 
 
    
 
    $('.down').click(function() { 
 
     
 
     alert("y no work?"); 
 
     
 
     $('html,body').animate({ 
 
      
 
      scrollTop: $('.block3').offset().top}, 800, "linear"); 
 
    }) 
 
    
 
})

.down {background:green; width:50px; height:50px; } 
 
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;}

<div class="down"></div> 
 

 
<div class="block1"></div> 
 

 
<div class="block2"></div> 
 

 
<div class="block3"></div> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

答

我注意到你没有JQuery用户界面，这可能是为什么easeOutQuart不工作的原因，如果你不想使用easeOutQuart线性的罚款。

要包括easeOutQuart或其他特殊的UI，包括JQuery UI

答

就包括然后jQuery UI的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 

 
<html> 
 
<body> 
 
<div class="down"></div> 
 

 
<div class="block1"></div> 
 

 
<div class="block2"></div> 
 

 
<div class="block3"></div> 
 
<style> 
 
.down {background:green; width:50px; height:50px; } 
 
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;} 
 
</style> 
 
<script> 
 
$(document).ready(function() { 
 

 
\t $('.down').click(function() { 
 
     alert("y no work?"); 
 
\t \t $("html, body").animate({scrollTop:$('.block3').position().top}, 800, "easeOutQuart"); 
 
\t }); 
 
    
 
}); 
 
</script> 
 
</body> 
 
</html>

库再试一切你的脚本应该完美。

谢谢！

答

而不是使用：

$("html, body").animate({scrollTop:$('.block3').position().top}, 800, "easeOutQuart");

使用top +物体高度：

$("html, body").animate({scrollTop:$('.block3').position().top + $('.block3').height()}, 800, "easeOutQuart");

JQuery Animate ScrollTop不起作用

相关推荐