纯CSS实现返回顶部
2022-06-27T19:06:46.png 个人习惯浏览网站有返回顶部的指向，点击返回到顶部，百度和Google就为何不肯加个这样链接以便浏览，有时网页实在太长了，返回到顶部拖到手累眼累。微信这一点就做得很方便，在手机顶部直接双击下状态栏就能返回顶部。于是乎能用CSS解决，就用CSS解决，方便简单，也便于更改。
还真给我找到解决方法，特此记录一下：CSS sticky实现返回顶部 ，作者在里面图文并茂介绍得很详细它的工作原理。并且提供预览和代码。
预览： https://codepen.io/xboxyan/pen/MWmGoER?spm=a2c6h.12873639.article-detail.7.2beb3bc02m1o5n 只需在主题加一行<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));
}