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

在页面加载时，要将滚动设置为特定的ID。 我做了大量的研究，碰到这个：

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

但是这似乎是从ID开始的，并在页面顶部生成animation？

HTML（这是页面的一半）很简单：

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

Answer 1

你只是滚动你的元素的高度。 offset（）返回一个元素相对于文档的坐标， top参数会给你沿着y轴的元素的像素距离：

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

你也可以添加一个延迟：

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

Answer 2

有一个jQuery的插件。 它将文档滚动到一个特定的元素，所以它完全位于视口中间。 它也支持animation缓冲，使滚动效果看起来非常平滑。 检查这个链接 。

在你的情况下，代码是

 $("#title1").animatedScroll({easing: "easeOutExpo"}); 

Answer 3

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

jquery-animate-body-for-all-browsers 。

Answer 4

带有scrollIntoView（）函数的纯JavaScript解决scheme：

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

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

Answer 5

尝试下面的代码。 使类名称页面的元素滚动，并保持相应的链接的ID名称的href

 $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: ($($anchor.attr('href')).offset().top - 50) }, 1250, 'easeInOutExpo'); event.preventDefault(); });