如何使用 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中文網其他相關文章！