如何流畅地滚动页面？答案

【问题标题】：How to scroll the page smoothly?如何流畅地滚动页面？
【发布时间】：2018-04-29 09:26:25
【问题描述】：

我需要在加载时以动画方式将页面滚动到页面上的某个位置。它工作正常（使用 jQuery 的动画）：

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

但是，它不是平滑的一件事。尤其是在移动设备上，感觉非常生涩。

我见过一些非常流畅的 CSS 动画（使用 transition 和 transform），但不知道如何将其应用于页面滚动。是否可以使用 CSS 做我想做的事？

【问题讨论】：

当然。只需应用包含 css-animation 的 css-class。例如：在 Jquery 中> $(#today).addClass("someCoolAnimation"); 在 css 中：好吧，无论你想要什么。 Good starting point here 。具体来说，您希望在 translateY 上制作动画
添加了纯js版本
我注意到您提到滚动需要 2 整秒。此页面上正在加载多少内容？如果您查看开发者控制台的网络选项卡，请求的数量/请求的总大小是多少？
@cale_b 不需要 2 秒。这是为了回应有人说要将间隔从 800 增加到 1800。网络请求很少 - 它们不是一个因素。
@Geert-Jan 我看过这些文档。但我无法让它发挥作用。这就是我要样品的原因。

标签： javascript jquery html css animation

【解决方案1】：

尝试设置以下css：

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

您也可以尝试使用原生 JavaScript 代替 jQuery：

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/en-US/docs/Web/API/Element/scrollIntoView

如果您使用的是 iOS，您可能还会感兴趣：Scrolling slow on mobile/ios when using overflow:Scroll

【讨论】：

这对我不起作用，因为用户最终会等待整整 2 秒才能在页面上执行某些操作。另外，它仍然不在移动设备上。
更新答案。
另请参阅stackoverflow.com/questions/33601165/…
我试过了，它确实明显更流畅了，但是，如果你必须向下滚动很长一段距离，它仍然有点笨拙。我希望有一个纯 CSS 的解决方案，因为它依赖于 GPU 而不是 CPU。
只是一个建议，似乎仅使用 css 似乎很棘手。为什么你没有一个中间点，在页面中间说页面的#middle 并做同样的事情，但behaviour: "instant" 到那个点，然后平滑到#today ？

【解决方案2】：

尝试使用easeOutCubic 或其他缓动函数 (choose one here)：

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

【讨论】：

【解决方案3】：

我发现跨浏览器/跨设备流畅scrollTop的最佳解决方案是使用velocity.js。它比 jQuery 的动画快，非常轻巧，支持多种语法，其中一种是 jQuery.animate() 使用的语法，所以你需要做的就是用 .velocity() 替换 .animate()（当然还要加载东西） .

我知道可能还有其他解决方案，但这个解决方案多年来一直很可靠，他们始终保持最新状态，我想说它是任何严肃的前端 Web 开发人员工具的保持者。你会在velocity 的libscore page 上找到一些非常花哨的名字。不，我不隶属。我只是感谢能够免费使用它。

【讨论】：