页面加载时动画滚动到ID

Question

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

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

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

HTML（位于页面中间）仅为：

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

- Adi

---

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

Answer 1

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

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

而且你还可以给它加上延迟：

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

- BumbleB2na

---

自动滚动有什么让我惊叹的地方吗？也许是你的解决方案的简单性。 - theblang

我需要在页面加载时将一个元素滚动到视图中，但有两个问题：a）使用“html，body”会产生两个回调（每个匹配的元素一个）。 b）这取决于浏览器使用哪个body或html。因此，我创建了一个gist，您可以适应您的项目以确保滚动到视图在“任何”浏览器上工作，并且当动画结束时只会得到一个回调。 https://gist.github.com/netsi1964/4ddffe1ae14e05220d25 - Netsi1964

这并不是完全正确的。我们真正需要考虑的是要滚动的body或元素的当前滚动位置。有了这个想法，您将把body的当前滚动位置添加到我们想要查看的元素的offset().top位置中，得到的总和就是我们要滚动到的值。$('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000); - mattdevio

@magreenberg 你试过这个吗？如果当前滚动位置大于0，那么你建议的方法可能行不通。假设可滚动容器高度为1000像素，当前滚动位置在1000处。假设你要滚动到的元素在垂直中心位置500处。我认为你所建议的方法会让它滚动到1500，对吧？ - BumbleB2na

@BumbleB2na 在这种情况下，.offset().top 会给你一个负数。而且这只适用于 body 和 html，因为 offset().top 会给出文档顶部的偏移量，而不是预期的滚动父级。 - mattdevio

Answer 2

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

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

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

P.S. 'smooth'参数现在可以在Chrome 61中正常工作，如评论中julien_c所述。

- Vladimir Vovk

---

现在可以正常工作（从Chrome 61开始） - julien_c

请务必检查浏览器兼容性。截至2018年10月，IE（11）、Edge和Safari支持“scrollIntoView”，但不支持“smooth”选项。 - metal_jacke1

纯JS最棒了。感谢那段代码片段！像双倍奶油一样顺滑。 - jean d'arme

Answer 3

废弃通知：jQuery 1.9版本中删除了jQuery.browser属性。有关更多详细信息，请访问文档：https://api.jquery.com/jQuery.browser/

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

来源: jQuery动画 - 适用于所有浏览器的页面滚动效果

- AleX gRey

---

jQuery.browser()在jQuery 1.9中已被移除，因此这不再是一个好的选择。 - kjones

Answer 4

这里有一个 jQuery 插件可以实现此功能，它会将文档滚动到特定元素位置，以使其完美地出现在视口中央。它还支持动画缓动效果，以使滚动效果看起来非常平滑。请访问此链接查看插件。

在您的情况下，代码如下：

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

- Eugene Tiurin

---

它还支持动画缓动，使滚动效果看起来非常流畅。不幸的是，这并不总是正确的。如果计算机由于某种原因变慢，它只会跳跃而不是正常移动。 - brunoais

平滑滚动需要计算大量像素。当然，一个慢的“计算机”（更多的GPU）无法做到这一点，但由于缺乏足够的ALU，所以他通常是正确的。而且真的很容易滚动库。 - Roland

Answer 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();
    });

- Akhil

Answer 6

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

height: 200px; overflow: scroll;

并在您想要显示滚动条的 div 或 section 中使用此样式类

- m.m