你能創造沒有按鈕的純 CSS 滾動動畫嗎？
- DDD原創
- 2024-10-29 13:20:29740瀏覽
純CSS 滾動動畫變得簡單
雖然實現由輸入按鈕觸發的滾動動畫令人印象深刻，但問題出現了：我們是否可以在沒有按鈕的情況下實現相同的效果，使用只有錨標記？
解決方案
要創建沒有按鈕的平滑滾動動畫，我們可以利用錨鏈接與滾動行為屬性相結合。此屬性受 Firefox、Chrome 和 Safari 等現代瀏覽器支持，規定了在指定容器內滾動的行為。
要實現此解決方案：
- 啟用平滑滾動： 新增滾動行為：平滑；到所需的容器（例如，html或要滾動的內容的父元素）。
- 建立錨定連結：使用錨標籤（）連結到特定部分或頁面上的元素。
- 新增錨點目標：使用具有對應 ID 的 HTML 元素指定錨點連結的目標。
範例用法：
<code class="html"><head>
<style type="text/css">
html {
scroll-behavior: smooth;
}
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
<!-- Some content -->
<div id="foo">That's foo.</div>
<a href="#body">Back to top</a>
</body></code>
瀏覽器支援：
請記住，雖然，雖然流行的瀏覽器、舊版的Internet Explorer、非Chromium 都支援此技術Edge、Safari 可能不支持，只能透過瞬時跳轉來連結目標。
以上是你能創造沒有按鈕的純 CSS 滾動動畫嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn