pc 回到顶部

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>回到顶部</title>
  <style>
    #to_top {
      width: 30px;
      height: 40px;
      font: 14px/20px arial;
      text-align: center;
      background: #06c;
      position: fixed;
      cursor: pointer;
      color: #fff;
      left: 1250px;
      top: 500px;
    }
  </style>
</head>
<body style="height: 2000px;">

<div id="to_top">返回顶部</div>

<script src="jquery-1.10.1.js"></script>
<script>
  $(function () {

//   运动总时长 
    var time = 300
//   每一帧动画的执行时间 
    var itemTime = 60
//   启动定时器 执行动画
    $('#to_top').click(function(){
      var offset = $('html').scrollTop() + $('body').scrollTop();
      var itemOffset = offset/(time/itemTime);

      var timer = setInterval(function(){ 
        offset -= itemOffset;
        if(offset <= 0){
          offset = 0;
          clearInterval(timer);
        }
        console.log(offset);
        $('html,body').scrollTop(offset);
      },itemTime)
    })
      
  });
</script>
</body>

</html>
posted @ 2020-08-09 10:18  13522679763-任国强  阅读(82)  评论(0)    收藏  举报