< 返回业界新闻列表

[网站搭建] 纯CSS实现返回顶部

发布时间：23-10-31 来源: 蓝海科技 IDC

个人习惯浏览网站有返回顶部的指向，点击返回到顶部，百度和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));
}

TAG标签: 实名认证 idc 服务器云主机云服务器

[网站搭建] 纯CSS实现返回顶部

相关推荐