如何使用 CSS 和锚点实现平滑滚动？

使用 CSS 和锚点实现平滑滚动

为了创建无缝的用户体验，您可能希望在单击页面顶部的按钮。虽然可以使用仅 CSS 的解决方案（涉及输入按钮），但我们探索了一种利用锚点的替代方法。

要实现平滑滚动，请利用指定滚动容器的滚动行为属性（MDN 参考）：

<code class="css">scroll-behavior: smooth;</code>

现代浏览器（例如 Firefox、Chrome、Safari 和 Opera）支持此属性。但是，请注意，Internet Explorer 和非 Chromium Edge 等浏览器缺乏对滚动行为的支持。

以下是如何实现此功能的示例：

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


  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</code>

单击“转到噗！”链接，您将体验到平滑向下滚动到“foo”元素，反之亦然的“返回顶部”链接。

这种方法提供了方便、平滑的滚动行为，无需额外的按钮。

以上是如何使用 CSS 和锚点实现平滑滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！