带动画的回到返回顶部

最新推荐文章于 2023-05-09 10:43:33 发布

曲小强

最新推荐文章于 2023-05-09 10:43:33 发布

阅读量801

点赞数 1

分类专栏：小卖部 js 文章标签：返回顶部动画

本文链接：https://blog.csdn.net/quhongqiang/article/details/84650925

版权

小卖部 js 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

<!DOCTYPE html> 
<html> 
  
  <head> 
    <meta charset="UTF-8"> 
    <title>回到顶部功能</title> 
  </head> 
  <style> 
    * { 
      padding: 0; 
      margin: 0; 
    } 
      
    .gotop { 
      display: none; 
      position: fixed; 
      bottom: 50px; 
      right: 50px; 
      width: 40px; 
      height: 40px; 
      padding: 5px; 
      background-color: #F00; 
      color: #FFF; 
      text-align: center; 
      cursor: pointer; 
    } 
  </style> 
  <script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script> 
  
  <body> 
    <p>1</p><br /><br /><br /><br /><br /><br /> 
    <p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br />
  
    <div id="btn" class="gotop"> 
      <p>回到顶部</p>
    </div> 
  </body> 
  <script> 
    //页面加载后触发
window.onload = function(){
  var btn = document.getElementById('btn');
  var timer = null;
  var isTop = true;
  //获取页面可视区高度
  var clientHeight = document.documentElement.clientHeight;
  //滚动条滚动时触发
  window.onscroll = function() {
  //显示回到顶部按钮
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight) {
      btn.style.display = "block";
    } else {
      btn.style.display = "none";
    };
  //回到顶部过程中用户滚动滚动条，停止定时器
    if (!isTop) {
      clearInterval(timer);
    };
    isTop = false;
  };
  btn.onclick = function() {
    //设置定时器
    timer = setInterval(function(){
      //获取滚动条距离顶部高度
      var osTop = document.documentElement.scrollTop || document.body.scrollTop;
      var ispeed = Math.floor(-osTop / 7);
       
      document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
      //到达顶部，清除定时器
      if (osTop == 0) {
        clearInterval(timer);
      };
      isTop = true;
       
    },30);
  };
};
  </script> 
  
</html>

曲小强

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
带动画的回到返回顶部

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;回到顶部功能&lt;/title&gt; &lt;/head&gt; &lt;style&gt; * { pad
复制链接

扫一扫

专栏目录