CSS下滑时始终回到顶部是很常见的需求,特别是在单页应用程序中。这可以通过使用JavaScript实现,但是也可以使用纯CSS解决。下面介绍一种纯CSS的方法。html { scroll-behavi
CSS下滑时始终回到顶部是很常见的需求,特别是在单页应用程序中。这可以通过使用JavaScript实现,但是也可以使用纯CSS解决。下面介绍一种纯CSS的方法。
html { scroll-behavior: smooth; } #back-to-top { position: fixed; bottom: 20px; right: 20px; background-color: #333; color: #fff; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 25px; opacity: 0; transition: opacity 0.2s; } #back-to-top:hover { opacity: 1; } #page-top:target #back-to-top { opacity: 1; } #page-top:target { scroll-margin-top: 0; }
首先,在html元素上设置scroll-behavior属性为smooth,以实现平滑的滚动效果。接下来,创建一个id为back-to-top的元素,它将显示在浏览器窗口的右下角。设置样式以使其具有圆形形状和不透明度为0。使用:hover和transition属性,当鼠标悬停在元素上时,它将以不透明度1显示。
在CSS最后,使用:target伪类选择器将back-to-top元素与id为page-top的元素相关联。id为page-top的元素是一个空的锚点,它位于文档的顶部。在用户滚动页面以距离顶部一定距离时,它将成为当前URL的一部分,并将触发:target选择器的样式。当此选择器激活时,back-to-top元素将以不透明度1显示,并且使用scroll-margin-top属性将视口滚动一段距离,以避免在页面顶部再次显示back-to-top元素。
现在,需要在页面的顶部创建一个锚点。这可以通过在页面顶部创建一个具有id =“page-top”的元素来完成。例如:
<div id="page-top"></div>
最后,在页面底部插入back-to-top元素:
<a href="#page-top" id="back-to-top">↑</a>
现在,CSS滚动回到顶部的代码就完成了。它还是很容易实现的。在使用单页Web应用程序的情况下,它可以使用户轻松返回页面顶部。
粉丝
0
关注
0
收藏
0