前端 css+js实现返回顶部功能

描述:

       本文主要是讲,通过css+js实现网页中的【返回顶部】功能。

 

实现代码:

HTML:

1 <div>
2     <button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button>
3 </div>

 

CSS:

 1 /* return top */
 2 #btnTop {
 3   display: none;
 4   position: fixed;
 5   bottom: 20px;
 6   right: 30px;
 7   z-index: 99;
 8   border: none;
 9   outline: none;
10   background-color: #89cff0;
11   color: white;
12   cursor: pointer;
13   padding: 15px;
14   border-radius: 10px;
15 }
16 #btnTop:hover {
17   background-color: #1E90FF;
18 }

 

JS:

 1 // 当网页向下滑动 20px 出现"返回顶部" 按钮
 2 window.onscroll = function() {
 3     scrollFunction()
 4 };
 5  
 6 function scrollFunction() {
 7     console.log(121);
 8     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 9         document.getElementById("btnTop").style.display = "block";
10     } else {
11         document.getElementById("btnTop").style.display = "none";
12     }
13 }
14  
15 // 点击按钮,返回顶部
16 function returnTop() {
17     document.body.scrollTop = 0;
18     document.documentElement.scrollTop = 0;
19 }

 

 

如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]

如果您想转载本博客,请注明出处

如果您对本文有意见或者建议,欢迎留言

感谢您的阅读,请关注我的后续博客

上一篇:在ESP32上使用umqtt接入阿里云物联网平台


下一篇:Spring+Log4j+ActiveMQ实现远程记录日志——实战+分析