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

Question

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

我有这个风格

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

还有这个脚本

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

因此，当窗口加载时，它会跳转到 ID 为 main 的 div 我想让它动起来但是因为我有 height: 100%; overflow: auto; 我不能使用这个脚本:

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

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

Answer 1

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

如果您正在寻找在点击超链接 时触发的滚动，您需要记住传递 e.preventDefault() 添加到点击事件以防止默认行为。如果链接指向同一页面(例如使用 #)，它将“跳转”到顶部，除非阻止此行为。

这是一个工作示例(向下滚动以查看链接):

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

希望对您有所帮助! :)