在页面加载时滚动到ID的动画

Question

我想在页面加载时将滚动设置为特定ID.我做了很多研究并遇到了这个问题:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

但这似乎从ID和动画到页面顶部开始？

HTML(位于页面的一半)很简单:

<h2 id="title1">Title here</h2>

Answer 1

您只是滚动元素的高度.offset()返回元素相对于文档的坐标,topparam将给出元素沿y轴的像素距离:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

你也可以添加一个延迟:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);

这不是真的。您确实应该考虑我们要滚动的主体或元素的当前滚动位置。考虑到这一点，您可以将body的当前滚动位置添加到我们要查看的元素的offset（top.top）位置，结果总和就是我们要滚动到的值。 html，body'）。animate（{scrollTop：（$（'html，body'）。scrollTop（）+ $（'＃title1'）。offset（）。top）}，1000）;` (2认同)

Answer 2

使用scrollIntoView()函数的纯JavaScript解决方案:

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

PS'平滑'参数现在可以在Chrome 61中使用,如评论中提到的julien_c.

Answer 3

弃用通知：该jQuery.browser属性已在 jQuery 1.9 中删除。访问文档了解更多详情：https : //api.jquery.com/jQuery.browser/

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);