在现代 Web 设计中，平滑滚动是网站吸引用户的重要特性之一。当用户滚动页面时，它可以平滑地滑过每个屏幕元素，具有流畅的体验，增强用户体验。
然而，不同的浏览器对于平滑滚动的支持程度和实现方式是不同的，这就需要开发者采取一些措施来确保在所有浏览器中都能够启用平滑滚动效果。在本文中，我们将介绍如何使用 JavaScript 和 CSS 来实现这一目标。
实现平滑滚动
纯 CSS 实现平滑滚动
在 CSS 中，我们可以使用 scroll-behavior 属性来为元素设置平滑滚动。这个属性有以下两个值：
auto: 默认值，浏览器根据自己的算法决定滚动行为smooth: 启用平滑滚动行为
例如，我们可以如下方式将平滑滚动应用到整个文档：
html { scroll-behavior: smooth; }
注意：虽然 scroll-behavior 是一个 CSS 属性，但是并不是所有浏览器都支持它。目前不支持它的浏览器包括 IE、Edge 15 及其以下版本和 Safari。
JavaScript 实现平滑滚动
为了确保在所有浏览器中都能够启用平滑滚动，我们需要使用 JavaScript 来实现它。我们可以通过监听当用户点击一个链接时，用 JavaScript 来控制页面的滚动行为。
下面是使用 JavaScript 实现平滑滚动的示例代码：
-- -------------------- ---- ------- -- ---------- -------------------------------------------------------- -- - -------------------------------- -------- --- - ------------------- -- ------ ------------------------------------------------------------------ --------- -------- -- --------- --- --- ---展开代码
这段代码做了以下几件事情：
- 使用
querySelectorAll选择所有带有锚点的链接。 - 遍历每个链接，并将一个
click事件监听器添加到它上面。 - 在单击链接时阻止默认行为，即跳转到链接指向的位置。
- 使用
scrollIntoView方法将页面滚动到与链接相对应的位置。
结论
在本文中，我们讨论了如何在所有浏览器中启用网站的平滑滚动。我们首先介绍了在 CSS 中使用 scroll-behavior 属性来实现平滑滚动，但是它并不被所有浏览器支持。因此，我们还介绍了如何使用 JavaScript 和 CSS 来确保在所有浏览器中启用平滑滚动效果。通过这种方式，我们可以提高网站的用户体验，并且使网站更加流畅和易于使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29030
