使用 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中文网其他相关文章！
