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

描述：

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

实现代码：

HTML：

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

CSS：

 /* return top */
 #btnTop {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 30px;
   z-index: ;
   border: none;
   outline: none;
   background-color: #89cff0;
   color: white;
   cursor: pointer;
   padding: 15px;
   border-radius: 10px;
 }
 #btnTop:hover {
   background-color: #1E90FF;
 }

JS：

 // 当网页向下滑动 20px 出现"返回顶部" 按钮
 window.onscroll = function() {
     scrollFunction()
 };

 function scrollFunction() {
     console.log();
     if (document.body.scrollTop >  || document.documentElement.scrollTop > ) {
         document.getElementById("btnTop").style.display = "block";
     } else {
         document.getElementById("btnTop").style.display = "none";
     }
 }

 // 点击按钮，返回顶部
 function returnTop() {
     document.body.scrollTop = ;
     document.documentElement.scrollTop = ;
 }