时间：2023-10-06 12:48:01 | 来源：网站运营
时间：2023-10-06 12:48:01 来源：网站运营
5行JavaScript代码实现页面平滑滚动：本文转载自：众成翻译HTML本身具有跳到页面任意位置的能力，只需给目标元素一个id 属性即可。这个技术叫做“锚链接”。
译者：为之漫笔
链接：5行JavaScript代码实现页面平滑滚动 - 众成翻译
原文：Smooth Page Scroll in 5 Lines of JavaScript
在线咨询
<a href="#destination">Click me: I’m <em>smoooooth</em>.</a>…<p id="destination">This is the target, further down the page.显然，只有页面长度超过窗口高度才可能真的跳转。为此，请自行在前面代码中省略号位置补充足够多的内容（或者试试我们推荐的填充文本生成器)。
body { scroll-behavior: smooth;}注意，别用英式写法，是scroll-behavior，没有“u”。
var anchorLink = document.querySelector("a[href='#destination']"),target = document.getElementById("destination");anchorLink.addEventListener("click", function(e) { if (window.scrollTo) { e.preventDefault(); window.scrollTo({"behavior": "smooth", "top": target.offsetTop}); }})先用querySelector通过CSS属性选择符找到href目标为#destination的链接。在链接的点击事件中，测试浏览器是否支持scrollTo方法。如果支持，先用e.preventDefault阻止浏览器立即跳转，然后调用scrollTo方法，由前面的CSS声明实现平滑效果。有3个选项：behavior、top必需，left可选。后两个指的是跳转目标在页面中的位置坐标值。可以用window.scroll代替window.scrollTo，它们功能一样。相对于加载框架，这几行代码简单得多。唯一的缺点是不允许修改计时函数或缓动函数，据说是防止被滥用。
var forEach = function (array, callback, scope) { for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); }};然后，找到所有锚链接和它们的地址，给它们的点击事件注册scrollTo： var anchorLinks = document.querySelectorAll("a[href^='#']");if (window.scrollTo) { forEach(anchorLinks, function(index, element) { var target = document.getElementById(element.getAttribute("href").substring(1)); element.addEventListener("click", function(el) { el.preventDefault(); window.scrollTo(0, target.offsetTop); }) });}注意，同样需要在body标签的CSS样式中添加scroll-behavior声明。关键词：平滑,滚动,实现
