Question

我对jQuery很新，所以请不要介意我的愚蠢。

我有这种风格

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

这个脚本

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

因此，当窗口加载时，它会跳转到标识为div的{{1}} 我希望它能够制作动画，但由于我有main我无法使用此脚本：

height: 100%; overflow: auto;

或许我不知道该怎么做。我知道这对你们来说可能看起来非常明显，但我很新，而且在决定发布之前我已经谷歌了很多。请有人帮助我。

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>

希望这有帮助！：）

Answer 2

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

动画scrollTop但我不能使用$（＆＃39; html，body＆＃39;）。animate（{scrollTop：0}，＆＃39; slow＆＃39;）;

2 个答案: