带动画的回到返回顶部

<!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>
带动画的回到返回顶部

猜你喜欢
