初学CSS：实现网页返回顶部按钮

1、问题需求

实现网页中常见的返回顶部按钮。当网页向下浏览到一定距离之后才会出现返回顶部按钮，当回到网页初始状态之后，返回顶部按钮又会隐藏。

2、操作原理

使用浮动float属性和定位属性position:sticky

3、解决方案

返回按钮使用div实现。将返回顶部div放置在需要的位置，使用position属性的sticky，实现当网页浏览到一定距离时，才会出现返回按钮。再使用float属性将div定位到右侧。

<!-- HTML -->
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<!-- 返回顶部按钮，这里需要放置在自己指定的位置，以此实现网页浏览到这里时，出现返回顶部按钮 -->
<div class="back-top">
    <a href="#top">返回顶部</a>
</div>

<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>

.back-top{ 
   
			/*float将div脱离文档流，这样就不会占据文档流中的位置，不会留有空白*/
            float: right;
            /*这里使用right将其浮动至右侧*/
            right: 100px;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background: #999999;
            position: sticky;
            /*注意：top属性实现定位，top和bottom等定位方式是不同的*/
            top: 500px;
            right: 100px;
        }
        .back-top>a{ 
   
            display: block;
            text-align: center;
            text-decoration: none;
            font-size: 20px;
            line-height: 100px;
        }

但是这里使用的float是存在问题的，因为float还是会占据位置的，原因是因为外部的div存在高度与宽度，那么这里将外部的div的宽度和高度设置为0就可以实现假不占据文档位置。

 .back-top{ 
   
            position: sticky;
            top: 500px;
            height: 0px;
            float: right;
            right: 50px;
        }
        .back-top>a{ 
   
            display: block;
            width: 100px;
            height: 100px;
            text-align: center;
            text-decoration: none;
            font-size: 20px;
            line-height: 100px;
            border-radius: 50px;
            background: #999999;
        }

4、实现结果

5、总结

1. 将带有position:sticky属性的元素放在需要的位置，必须要设定好left、right、top、bottom其中的一个值，可以设置多个，但是不能同时设置相反的值；
2. 使用float将元素设定在指定位置，但是不知道会不会对position产生影响，所以这里存疑；
3. 父元素必须是overflow:visible，否则不会生效，如果是hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况;

告读者知： 这是作者在实践中遇到的问题，但是其解决办法不会只有一种，而且作者方法可能存在很多问题，所以如果您若是使用的话请谨慎，遇到问题可以进行留言评论，大家可以相互交流。

今天的文章CSS实现网页返回顶部按钮分享到此就结束了，感谢您的阅读。