动画 scrollTop 但我不能使用 $('html,body').animate({scrollTop: 0}, 'slow');

Question

我是 jQuery 的新手，所以请不要介意。

我有这个风格

html, body{
    height: 100%;
    overflow: auto;
}

还有这个脚本

$(document).ready(function() {
    $('#guide-wrap').scrollTop($('#main').position().top);
});

所以当 window 加载时，它跳转到 div id main 我想让它动起来 但是因为我有 height: 100%; overflow: auto; 我不能使用这个脚本:

$('html,body').animate({scrollTop: 0}, 'slow');

或者我不知道该怎么做。我知道这对你们来说可能看起来很明显，但我是新手，在决定 post 之前我已经 google 了很多。请任何人帮助我。

Answer 1

$("html, body").animate({ scrollTop: $("#main").offset().top }, "slow");

Answer 2

$('html, body').animate({scrollTop: 0}, 'slow'); 是动画滚动的完全有效代码。但是，在 $(document).ready() 上使用滚动到页面顶部的动画是没有意义的，因为默认情况下页面会自动位于顶部。

如果您正在寻找在 hyperlink 点击时触发的滚动，您需要记住传递 e.preventDefault() 点击事件以防止默认行为。如果 link 指向同一页面（例如 #），除非阻止此行为，否则它将 'jump' 指向顶部。

这是一个工作示例（向下滚动以查看 link）：

$(".scroll-top").on("click", function(e){
   e.preventDefault();
   $('html, body').animate({scrollTop: 0}, 'slow');
});

.tall {
  height: 200vh;
}

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

<div class="tall">Top of the page</div>

<a href=# class="scroll-top">Scroll Up</a>

希望对您有所帮助！ :)

动画 scrollTop 但我不能使用 $('html,body').animate({scrollTop: 0}, 'slow');

Animate scrollTop but I can't use $('html,body').animate({scrollTop: 0}, 'slow');

css

jquery

scrolltop

jquery-animate