Web JS实现页面返回顶部

超、凢脫俗 2022-06-17 00:54 349阅读 0赞

![右下角“返回顶部“按钮][1240]

> > 之前写博客的时候加了个返回顶部的功能
> 
> 采用js的scrollTop属性实现了一下这个简单的功能

当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。

原理：当页面加载的时候，把返回顶部按钮定位到页面的右下角，当页面从顶部向下滑动不超过300px时，返回顶部按钮隐藏，当页面从顶部向下滑动超过300px时，返回顶部按钮显示，当用户点击返回顶部按钮的时候，页面返回顶部。

通过下面这段js代码就能够实现上述的功能。

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>槑头脑的博客</title>
    </head>
    
    <body>
    <div id="to_top" title="返回顶部">
      <img src="images/top.png" width="40" height="40" />
    </div>
    </body>
    
    <style>
    body{
         margin:0; padding:0}
    #to_top{
         right: 30px; bottom: 30px; position: fixed; cursor: pointer;}
    </style>
    
    <script>
    window.onscroll = function(){
         
    
      var distance = document.documentElement.scrollTop || document.body.scrollTop; //距离页面顶部的距离
    
      if( distance >= 300 ) { //当距离顶部超过300px时，显示图片
        document.getElementById('to_top').style.display = "";
      } else { //距离顶部小于300px，隐藏图片
        document.getElementById('to_top').style.display = "none";
      }
    
      var toTop = document.getElementById("to_top"); //获取图片所在的div
    
      toTop.onclick = function(){
          //点击图片时触发的点击事件
        document.documentElement.scrollTop = document.body.scrollTop = 0; //页面移动到顶部
      }
    }
    </script>
    </html>

下面是返回按钮的图片

![top.png][]

> > > > > 共
> > > > 
> > > > 同
> > > 
> > > 进
> > 
> > 步
> 
> O(∩\_∩)O

[1240]: /images/20220617/c6522bab6fb54831a0e17fa625a9bea9.png
[top.png]: /images/20220617/45d9456371e54ddc8e611aabba230d96.png