Animate scrollTop但我不能使用$（'html，body'）。animate（{scrollTop：0}，'slow'）;

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

我有这种风格

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

而这个脚本

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

所以当窗口负载，它跳到div ID为main 我希望它动画但因为我有height: 100%; overflow: auto;我不能使用这个脚本：

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

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

来源

2017-09-06 Sovai

它没有动画，并与'溢出：汽车''scrollTop：0'无法找到'＃主要' – Sovai

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

希望这有助于！ :)

来源

2017-09-06 02:32:28

你好黑曜石时代，谢谢你的简单，但作品的答案。 e.preventDefault（）;解决了这个问题。 – Sovai

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

来源

2017-09-06 02:29:18 BrandonW

你好BrandonW，谢谢你的答案。看起来它应该有效，但我不知道为什么，它什么都不做。我重新加载了页面，但似乎没有发生任何事情。 – Sovai

这取决于用例。在页面加载时很少使用它，就像浏览器实际上在页面的较低位置重新加载一样，这是不可靠的。或者你正在使用像烬宝这样的框架。在超链接中，它与e.preventDefault（）更相关，或者通过单击按钮触发操作。 – BrandonW

谢谢你BrandonW。 e.preventDefault（）可以做到这一点。 – Sovai

Animate scrollTop但我不能使用$（'html，body'）。animate（{scrollTop：0}，'slow'）;

回答

相关问题