js实现一键回到顶部小效果

最新推荐文章于 2024-09-11 06:46:04 发布

s先生的d小姐

最新推荐文章于 2024-09-11 06:46:04 发布

阅读量463

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_44326389/article/details/107746202

版权

javascript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<style>
  *{
       margin: 0;
       padding: 0;
   }
   header{
       height: 400px;
       background: #ddd;
   }
   section{
       height: 1800px;
       width: 1130px;
       margin: 0 auto;
       background: #f99;
   }
   footer{
       height: 600px;
       background: #ddd;
   }
   #goTop{
       width: 50px;
       height: 50px;
        /*未给父元素设置top和bottom,就可以被束缚在父元素中*/
       position: absolute;    
       background: #000;
       margin-left: 565px;
       left: 50%;
   }
   #goTop.active{
       /* goTop并且带有active类的元素 */
       position: fixed;
       left: 50%;
       bottom: 100px;
   }
   .wrap{
       width: 1130px;
       height: 100px;
       background: yellowgreen;
       margin: 0 auto;
   }
</style>

<body>
    <header></header>
    <section></section>
    <footer id="footer">
        <div class="wrap">
                <div id="goTop">
                </div>
        </div>
    </footer>
</body>

<script>
// 可视窗口的高度（可视窗口到小方块的上条边的距离）
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
onscroll = function(){
   //scrollTop是卷入屏幕里的高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if(scrollTop >= 500){
        goTop.className = "active";
    }else{
        goTop.className = "";
    }
   //2200 是小方块到网页顶部的距离（header+section的距离）；
   //100是 #goTop.active中bottom的值；
   //50是小方块元素的高度
    if(scrollTop > 2200 - clientHeight + 100 +50){       
        goTop.className = "";
    }
}
//以上内容是设置小方块消失出现的部分
//以下内容是设置小方块点击后回到顶部的效果
goTop.onclick = function(){
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>