使用CSS 和錨點實現平滑滾動
為了創建無縫的用戶體驗，您可能想要在點擊頁面頂部的按鈕。雖然可以使用僅 CSS 的解決方案（涉及輸入按鈕），但我們探索了一種利用錨點的替代方法。
要實現平滑滾動，請利用指定滾動容器的滾動行為屬性（MDN 參考）：
<code class="css">scroll-behavior: smooth;</code>
現代瀏覽器（例如Firefox、Chrome、Safari 和Opera）支援此屬性。但是，請注意，Internet Explorer 和非 Chromium Edge 等瀏覽器缺乏對捲動行為的支援。
以下是如何實現此功能的示例：
<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>單擊“轉到噗！”鏈接，您將體驗到平滑向下滾動到“foo”元素，反之亦然的「返回頂部」連結。
這種方法提供了方便、平滑的滾動行為，無需額外的按鈕。
以上是如何使用 CSS 和錨點實現平滑滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
