jQuery教程

jQuery回到顶部

本文主要是介绍jQuery回到顶部，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

回到顶部

如果是一瞬间回到顶部，那很简单，但是如果想要平滑的回到顶部，那我们可以先计算出当前滚动条和顶部的位置，然后设置一个时间，表示在这个时间点到达顶部，并且是分多次的，每次设置一定的时间，计算出每次距离之后定时往顶部拉进距离。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>03_回到顶部</title>
  <style>
    #to_top {
      width: 30px;
      height: 40px;
      font: 14px/20px arial;
      text-align: center;
      background: #06c;
      position: fixed;
      cursor: pointer;
      color: #fff;
      left: 1050px;
      top: 500px;
    }
  </style>
</head>
<body style="height: 2000px;">
  <div style="border:1px solid black;width:100px;height:150px;overflow:auto">
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    his is some text.
  </div>
  <br>
  <br>
  <br>
  <button id="btn1">得到scrollTop</button>
  <button id="btn2">设置scrollTop</button>
  
<div id="to_top">返回顶部</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  $('#to_top').click(function () {
    // 瞬间滚到顶部，直接定义距离为0，没什么特效
    //$('html,body').scrollTop(0)

    // 平滑滚到顶部
      // 总距离
    var $page = $('html,body')
    //兼容chrome和ie，获取滚动条当前距离顶部的距离
    var distance = $('html').scrollTop() + $('body').scrollTop()
      // 总时间
    var time = 500
      // 间隔时间
    var intervalTime = 50
    //单元移动的距离，每一次移动的距离
    //一共需要移动的次数=(time/intervalTime)
    //每次需要移动的距离=distance/(time/intervalTime)
    var itemDistance = distance/(time/intervalTime)
      // 使用循环定时器不断滚动
    var intervalId = setInterval(function () {
      distance -= itemDistance
      // 到达顶部, 停止定时器
      if(distance<=0) {
        distance = 0 //修正
        clearInterval(intervalId)
      }
      $page.scrollTop(distance)
    }, intervalTime)

  })
</script>
</body>

</html>

 

界面：

 

这篇关于jQuery回到顶部的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航