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

进出口试图动画滚动到一个特定的 ID 页面加载。我做了很多研究，发现了这个:

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

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

HTML (在页面的中间)很简单:

<h2 id="title1">Title here</h2>
332711 次浏览
小开
最佳答案

您只是在滚动元素的高度。偏移量()返回一个元素相对于文档的坐标，top参数会给出元素在 y 轴上的像素距离:

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

你也可以给它添加一个延迟:

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

这里有一个 jquery 插件。它将文档滚动到一个特定的元素，这样它就完美地位于 viewport 的中间。它还支持动画缓和，使滚动效果看起来超级平滑。检查 这个链接。

在您的情况下，代码是

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

弃用说明: jQuery 1.9中的 jQuery.browser属性已经被移除。更多详细信息请访问文档: (a href = “ https://api.jQuery.com/jQuery.chrome/”rel = “ nofollow norefrer”> https://api.jQuery.com/jQuery.browser/

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

资料来源: 所有浏览器的动画体滚动条

小开

尝试使用以下代码。使类名为 翻页的元素，并保留相应链接的标识名为 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();
});
小开

具有 ScrollIntoView ()功能的纯 javascript 解决方案:

el = document.getElementById('title1')
el.scrollIntoView({block: 'start', behavior: 'smooth'});
<h2 id="title1">Some title</h2>

P.S. 'smooth' parameter now works from Chrome 61 as julien_c mentioned in the comments.

小开

对于简单的滚动，使用以下样式

身高: 200像素; 溢出: 滚动;

并使用这个样式类的 div 或部分，你想显示滚动


提交答案