虽然实现由输入按钮触发的滚动动画令人印象深刻,但问题出现了:我们是否可以在没有按钮的情况下实现相同的效果,使用只有锚标记?
解决方案
要创建没有按钮的平滑滚动动画,我们可以利用锚链接与滚动行为属性相结合。此属性受 Firefox、Chrome 和 Safari 等现代浏览器支持,规定了在指定容器内滚动的行为。
要实现此解决方案:
示例用法:
<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中文网其他相关文章!