你能创建没有按钮的纯 CSS 滚动动画吗？

纯 CSS 滚动动画变得简单

虽然实现由输入按钮触发的滚动动画令人印象深刻，但问题出现了：我们是否可以在没有按钮的情况下实现相同的效果，使用只有锚标记？

解决方案

要创建没有按钮的平滑滚动动画，我们可以利用锚链接与滚动行为属性相结合。此属性受 Firefox、Chrome 和 Safari 等现代浏览器支持，规定了在指定容器内滚动的行为。

要实现此解决方案：

1. 启用平滑滚动： 添加滚动行为：平滑；到所需的容器（例如，html或要滚动的内容的父元素）。
2. 创建锚链接：使用锚标签（）链接到特定部分或页面上的元素。
3. 添加锚点目标：使用具有相应 ID 的 HTML 元素指定锚点链接的目标。

示例用法：

<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>

浏览器支持：

请记住，虽然流行的浏览器、旧版本的 Internet Explorer、非 Chromium 都支持此技术Edge、Safari 可能不支持，只能通过瞬时跳转来链接目标。

以上是你能创建没有按钮的纯 CSS 滚动动画吗？的详细内容。更多信息请关注PHP中文网其他相关文章！