如何使网页平滑滚动？

Question

我需要在页面加载时以动画的方式滚动到页面上的特定位置。使用jQuery的animate效果很好:

$(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#today').offset().top - 50
    }, 800, "linear");
});

然而，它并不流畅。特别是在移动设备上，它感觉非常卡顿。我看过一些使用transition和transform的CSS动画非常平滑，但是不知道如何应用到页面滚动中。请问是否可能使用CSS实现我想要的效果？

- AngryHacker

---

当然可以。只需应用包含CSS动画的CSS类即可。例如：在Jquery中> $(#today).addClass("someCoolAnimation"); 在CSS中：随便你想要什么。这里有一个好的起点。具体来说，您需要在translateY上进行动画处理。 - Geert-Jan

添加了一个纯JS版本。 - alexisdevarennes

我注意到你提到滚动需要2秒钟才能完成。这个页面加载了多少内容？如果你查看开发者控制台的网络选项卡，请求的数量/请求的总大小是多少？ - random_user_name

@cale_b 这不需要2秒钟。这是对某人建议将间隔从800增加到1800的回应。网络请求非常少 - 它们不是一个因素。 - AngryHacker

@Geert-Jan 我看过这些文档。但是我无法使其正常工作。这就是为什么我要求一个示例的原因。 - AngryHacker

Answer 1

尝试设置以下CSS：

<style type="text/css">
    html {
      scroll-behavior: smooth !important;
    }
</style>

您可以尝试使用没有jQuery的纯JavaScript来完成此操作：

function showIt(el_id) {
    var el = document.getElementById(el_id);
    el.scrollIntoView(true, {behavior: "smooth"});
}
showIt('today')

还可以考虑在页面中间添加一个中介元素，例如：

<div id="middle" style="display: none;"></div>

function showIt(el_id) {
    var middle_el = document.getElementById('middle');
    var el = document.getElementById(el_id);
    middle_el.scrollIntoView(true, {behavior: "instant"});  // Go to middle directly and then scroll slowly to #today.
    el.scrollIntoView(true, {behavior: "smooth"});
}
showIt('today')

更多关于scrollIntoView的信息请参见：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView 如果您正在使用iOS系统，可能会对使用overflow:Scroll时在移动设备上滚动缓慢感兴趣。

- alexisdevarennes

---

那对我来说行不通，因为用户要等待2秒钟才能在页面上做任何事情。此外，它仍然不能在移动设备上使用。 - AngryHacker

更新的答案。 - alexisdevarennes

请参见 https://dev59.com/31wX5IYBdhLWcg3wnwgy。 - alexisdevarennes

我尝试了一下，确实更加流畅了，但是如果你需要滚动相当长的距离，它仍然有点卡顿。我希望能找到一个纯CSS的解决方案，因为它依赖于GPU而不是CPU。 - AngryHacker

只是一个建议，似乎仅使用CSS会相当棘手。为什么不在页面中间设置一个中间点，比如说“#middle”，并对该点执行相同的操作，但使用“behavior: "instant"”，然后再平滑地滚动到“#today”呢？ - alexisdevarennes

使用polyfill使scrollintoviewoptions浏览器无关，并且您就安全了 :) https://dev59.com/XVgQ5IYBdhLWcg3wnFLJ#55357885 - metamagikum

Answer 2

尝试使用easeOutCubic或其他缓动函数(在这里选择)：

$(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#today').offset().top - 50
    }, 800, "easeOutCubic");
});

- Ethan

Answer 3

我发现跨浏览器/跨设备平稳的scrollTop最佳解决方案是使用velocity.js。它比jQuery的animate更快，相当轻巧，并支持多种语法之一是由jQuery.animate()使用的语法，因此您所需做的就是用.velocity()替换.animate()（当然也要加载该文件）。

我知道可能还有其他解决方案，但这个解决方案已经稳定使用多年，他们始终保持更新，我认为它是任何严肃的前端网站开发人员工具箱中必备的工具。您将在velocity的libscore页面上找到一些非常时尚的名称。不，我没有关联。我只是感谢能够免费使用它。

- tao