如何使用 CSS 的 scroll-behavior 属性实现平滑滚动？

推荐答案

使用 CSS 的 scroll-behavior 属性可以实现平滑滚动。该属性接受两个值：auto (默认值，表示立即滚动) 和 smooth (表示平滑滚动)。

要实现平滑滚动，你需要将 scroll-behavior 设置为 smooth 应用到需要平滑滚动的元素上，通常是 html 元素。例如：

html {
  scroll-behavior: smooth;
}

这样，当用户点击页面上的锚点链接或通过 JavaScript 代码进行页面滚动时，滚动过程将呈现平滑动画效果。

本题详细解读

scroll-behavior 属性概述

scroll-behavior 属性用于定义在滚动框中执行滚动操作时，滚动行为是立即发生还是以平滑动画形式呈现。它是一个非常有用的 CSS 属性，能提升用户体验，使页面滚动更自然流畅。

scroll-behavior 属性的值

scroll-behavior 属性接受以下两个值：

• auto: 默认值，滚动操作立即发生，没有动画效果。
• smooth: 滚动操作以平滑的动画效果进行。

如何使用 scroll-behavior: smooth 实现平滑滚动

1. 选择应用 scroll-behavior 的目标元素： 通常，我们将 scroll-behavior: smooth 应用于 html 元素，这样整个页面的滚动都会是平滑的。 也可以将其应用于其他滚动容器（如 div，带有 overflow: scroll 或者 overflow: auto 的元素），但要注意只有应用了滚动行为的元素才会生效。

   html {
     scroll-behavior: smooth;
   }

2. 触发滚动事件： 触发滚动事件的方式主要有以下几种：

   • 锚点链接： 当用户点击页面中的锚点链接 (如 <a href="#target">) 时，浏览器会自动滚动到目标元素。
   • JavaScript 滚动方法： 通过 JavaScript 代码调用 window.scrollTo(), element.scrollTo(), window.scrollBy() 或 element.scrollBy() 等方法来实现滚动。

   // JavaScript 例子
   document.querySelector('#scrollToBtn').addEventListener('click', function() {
     window.scrollTo({
       top: 500,
       behavior: 'smooth'
     });
   });

   注意： 如果你使用 JavaScript 控制滚动，也可以在 JavaScript 代码中通过传递 behavior: 'smooth' 选项来实现平滑滚动效果，即使没有设置全局的 scroll-behavior 属性， JavaScript 中也可以通过这种方式独立控制。

兼容性

scroll-behavior 属性的兼容性良好，现代浏览器都支持。但是，为了兼容旧版本浏览器，你可能需要使用 JavaScript polyfill。

示例

以下是一个简单的 HTML 和 CSS 示例，展示了如何使用 scroll-behavior: smooth 实现平滑滚动：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Scroll Example</title>
    <style>
        html {
            scroll-behavior: smooth;
        }

        body {
            height: 2000px; /* 制造滚动条 */
        }

        .section {
            height: 600px;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
        }
        nav{
            position:fixed;
        }

        nav a {
            margin-right:10px;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <button id="scrollToBtn">scroll 500 px down</button>
    </nav>


    <div id="section1" class="section">Section 1</div>
    <div id="section2" class="section">Section 2</div>
    <div id="section3" class="section">Section 3</div>


    <script>
      document.querySelector('#scrollToBtn').addEventListener('click', function() {
        window.scrollTo({
          top: 500,
          behavior: 'smooth'
        });
      });
    </script>
</body>
</html>

在这个示例中，点击导航栏中的链接将平滑滚动到对应的区域，点击按钮会通过JS平滑滚动到页面指定的位置。