[网站搭建] 纯CSS实现返回顶部
个人习惯浏览网站有返回顶部的指向,点击返回到顶部,百度和Google就为何不肯加个这样链接以便浏览,有时网页实在太长了,返回到顶部拖到手累眼累。微信这一点就做得很方便,在手机顶部直接双击下状态栏就能返回顶部。于是乎能用CSS解决,就用CSS解决,方便简单,也便于更改。
还真给我找到解决方法,特此记录一下:CSS sticky实现返回顶部,作者在里面图文并茂介绍得很详细它的工作原理。并且提供预览和代码。
只需要在主题加一行
<a href="#" class="back"></a>
然后对此链接进行CSS定义即可:
html,body{
scroll-behavior: smooth;
}
.back{
position: sticky;
float: right;
top: -110px;
margin-top: -50px;
border-radius: 50%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
background-size: 50%;
width: 50px;
height: 50px;
transform: translateY(calc(100vh + 50px));
}
相关推荐
2008系统复制粘贴失效,某个界面无法复制但是其他界面可以,怎么处理?经验分享。 >点击查看详情<
服务器右击某个文件夹的时候特别卡顿怎么办?右击空白没问题,右击文件文件夹非常卡。 >点击查看详情<
选择网站Web服务器的配置该考虑哪些方面? >点击查看详情<
服务器通用请求返回值,常见的IIS报错情况及原因。 >点击查看详情<
如何查询服务器端口被占用情况,被哪个程序进程占用了?查看某个端口是否开启? >点击查看详情<
2008server系统宝塔面板,windows linux面板如何一键迁移?批量转移网站数据? >点击查看详情<
2008server系统怎么批量转移IIS网站、配置、应用池? >点击查看详情<
2008系统物理机怎么设置多界面?多用户?多桌面?一步解决! >点击查看详情<
Windows Server2019/2022中禁用自动更新(更改为手动更新)系统 >点击查看详情<