纯CSS实现返回顶部

       个人习惯浏览网站有返回顶部的指向，点击返回到顶部，百度和Google就为何不肯加个这样链接以便浏览，有时网页实在太长了，返回到顶部拖到手累眼累。微信这一点就做得很方便，在手机顶部直接双击下状态栏就能返回顶部。于是乎能用CSS解决，就用CSS解决，方便简单，也便于更改。

　　还真给我找到解决方法，特此记录一下：CSS sticky实现返回顶部，作者在里面图文并茂介绍得很详细它的工作原理。并且提供预览和代码。

只需要在主题加一行

1. <a href="#" class="back"></a>

复制代码

然后对此链接进行CSS定义即可：

1. html,body{
   
2.   scroll-behavior: smooth;
   
3. }
   
4. .back{
   
5.   position: sticky;
   
6.   float: right;
   
7.   top: -110px;
   
8.   margin-top: -50px;
   
9.   border-radius: 50%;
   
10.   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;
    
11.   background-size: 50%;
    
12.   width: 50px;
    
13.   height: 50px;
    
14.   transform: translateY(calc(100vh + 50px));
    
15. }

复制代码