一键回到网页顶部

最新推荐文章于 2023-11-15 16:46:03 发布

zwj的CS-DN

最新推荐文章于 2023-11-15 16:46:03 发布

阅读量1k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_39772439/article/details/125556762

版权

htm:

  <div>
            <a onclick="returnTop()" id="btnTop" title="返回顶部"><img src="./Image/labelpic/cd-top-arrow.svg"></a>
  </div>

css:

#btnTop {
    display: none;
    text-align: center;
    position: fixed;
    bottom: 50px;
    height: 50px;
    width: 50px;
    right: 10px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #14AAAA ;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 2px;
  }
  #btnTop:hover {
    background-color: #14AAAA;
    opacity: 0.5;
  }

js:

 $(function () {
   $(window).scroll(function () { //只要窗口滚动,就触发下面代码  
     // 当网页向下滑动 30px 出现"返回顶部" 按钮     
      if (document.body.scrollTop > 2000 || document.documentElement.scrollTop > 2500) {
        document.getElementById("btnTop").style.display = "block";
    } else {
        document.getElementById("btnTop").style.display = "none";
    }
    });
 })；
 	 
// 点击按钮，返回顶部
function returnTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}