html

<button onclick="topFunction()" id="myBtn">返回顶部</button>

css

    
    #myBtn {

  position: fixed;
  bottom: 5px;
  right: 5px;
  z-index: 150;
  border: none;
  outline: none;
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 10px;
  font-weight:bold;
  text-align:center;
  background-color:Black;
  opacity: 0.70;
  font-size: 0.8rem;
}

#myBtn:hover {
  background-color:red;
}

js

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

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;

}

返回顶部