你能創造沒有按鈕的純 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中文網其他相關文章！