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

【问题标题】：Animate scroll to ID on page load在页面加载时动画滚动到 ID
【发布时间】：2011-10-04 16:15:08
【问题描述】：

我正在尝试在页面加载时将滚动设置为特定 ID。我做了很多研究，发现了这个：

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

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

HTML（位于页面的中间）很简单：

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

【问题讨论】：

这不是一个很好的答案，但我强烈推荐 Ariel Flesler 的“scrollTo”插件；它有很多用于平移页面的功能，以及一些针对常见情况的插件扩展（例如，如果它在同一页面上，您可能会发现他的“LocalScroll”插件对于滚动到链接的 href 很有用）。你可以在这里获取插件：flesler.blogspot.com/2007/10/jqueryscrollto.html

标签： jquery scroll jquery-animate

【解决方案1】：

您只是在滚动元素的高度。 offset() 返回元素相对于文档的坐标，top 参数将给出元素沿 y 轴的距离（以像素为单位）：

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

你也可以给它加一个延迟：

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

【讨论】：

自动滚动是什么让我“哇！酷！”？也许这是您的解决方案的简单性。
我需要在页面加载时将一个元素滚动到视图中，但有两个问题：a) 使用“html,body”给出了两个回调（每个匹配元素一个）。 b）这取决于浏览器，body 或 html 中的哪一个起作用。所以我提出了一个要点，您可以在项目中使用它，以确保滚动到视图适用于“任何”浏览器，并且在动画结束时您只会得到一个回调。 gist.github.com/netsi1964/4ddffe1ae14e05220d25
这不太正确。您真的应该考虑我们正在尝试scroll 的主体或元素的当前滚动位置。考虑到这一点，您可以将body 的当前滚动位置添加到我们想要查看的元素的offset().top 位置，结果总和就是我们想要滚动到的值。$('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);
@magreenberg 你试过了吗？如果当前滚动位置高于值 0，那么您的建议可能不起作用。假设可滚动容器高 1000 像素，当前滚动位置为 1000。假设您滚动到的元素位于 500 的垂直中心。我认为您的建议会告诉它滚动到 1500对吧？
@BumbleB2na .offset().top 在这种情况下会给你一个负数。这真的只适用于body 和html，因为offset().top 会给你文档顶部偏移量，而不是预期的滚动父级。

【解决方案2】：

带有scrollIntoView()函数的纯javascript解决方案：

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

&lt;h2 id="title1"&gt;Some title&lt;/h2&gt;

附： 'smooth' 参数现在可以在 Chrome 61 中使用，如 cmets 中提到的 julien_c。

【讨论】：

现在可以使用（来自 Chrome 61）
请务必检查浏览器兼容性。截至 10/2018 IE (11)，Edge 和 Safari 支持“scrollIntoView”但不支持“平滑”选项。
纯 JS ftw。谢谢你的sn-p！像双重奶油一样光滑

【解决方案3】：

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

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

来源：jQuery Animate Body Scroll For All Browsers

【讨论】：

jQuery.browser() 在 jQuery 1.9 中被移除，所以这不再是一个很好的选择

【解决方案4】：

为此有一个 jquery 插件。它将文档滚动到特定元素，以便它完美地位于视口的中间。它还支持动画缓动，使滚动效果看起来超级流畅。检查this link。

在你的情况下，代码是

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

【讨论】：

"它还支持动画缓动，使滚动效果看起来超级流畅" 不幸的是，这并不成立。如果计算机由于某种原因速度很慢，它只是不停地跳动而实际上并没有正常移动。
平滑滚动需要计算大量像素。当然，慢速“计算机”（更多 GPU）无法做到这一点，但由于缺乏足够的 ALU。所以总的来说他是对的。而且真的很容易滚动库。

【解决方案5】：

尝试以下代码。制作类名 page-scroll 的元素并将 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();
    });

【讨论】：

【解决方案6】：

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

高度：200px；溢出：滚动；

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

【讨论】：