Question

我正在尝试在点击绿色块时将页面向下滚动到“.block3”。我在这里错过了什么？我似乎无法让它工作，我检查了类似的线程没有运气。

$(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>

Answer 1

问题是selector。您一次只能滚动一个元素。对于缓和，您需要额外的库。

我注意到你的卷轴没有到达终点。我认为缩进

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

您必须使用逗号分隔每个选择器。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

我注意到你没有JQuery UI，这可能是easeOutQuart无效的原因，如果你不想使用easeOutQuart，线性就好了。 / p>

要加入easeOutQuart或其他特殊用户名，请加入JQuery UI

Answer 4

只需包含jquery UI

＆＃13;

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

＆＃13;

库然后再次尝试你的脚本应该完美的一切。

谢谢！

Answer 5

而不是使用：

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

使用顶部+物体高度：

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

JQuery Animate ScrollTop不起作用

5 个答案: