秦松使用jQuery实现点击回到顶部小demo

最新推荐文章于 2021-10-31 23:25:52 发布

飘…

最新推荐文章于 2021-10-31 23:25:52 发布

阅读量271

点赞数 2

分类专栏： Jquery

本文链接：https://blog.csdn.net/luo609630199/article/details/86771468

版权

Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码中使用了两种方式,方式一非常简单,方式二可能才是我们实际项目中会用到到的,以及方式二的实现原理更值得我们取学习,当然代码只是供学习使用,实际项目中还是需要根据自己的项目需要灵活应用.

<!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: 95%;
      top: 500px;
    }
  </style>
</head>
<body style="height: 2000px;">

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

</body>

</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  //瞬间滚动到顶部
  /*$('#to_top').click(function () {
      /!*'html,body' 为了兼容IE和chrome*!/
    $('html,body').scrollTop(0)
  })*/
  //平滑滚到顶部
  $('#to_top').click(function () {
      var $page=$('html,body');
      //先算出滚动的总距离,为了兼容IE和chrome*!/
      var distance=$(document.documentElement).scrollTop()+$(document.body).scrollTop()
      //alert(distance)
      //滚动的总时间
        var time=500;
        //间隔时间
        var intervalTime=10;
      //把总距离分成若干个小的段(就像打游戏或者看电影时的每一帧)
        var itemDistance=distance/(time/intervalTime);
        //使用循环定时器不断滚动
        var intervalId=setInterval(function () {
            distance-=itemDistance
            //达到顶部,停止滚动
            if (distance<=0){//滚动中的小数相减可能会为负
                distance=0;//修正
                //清楚定时器
                clearInterval(intervalId)
            }
            $page.scrollTop(distance)
        },intervalTime)
  })
</script>

飘…

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
秦松使用jQuery实现点击回到顶部小demo

代码中使用了两种方式,方式一非常简单,方式二可能才是我们实际项目中会用到到的,以及方式二的实现原理更值得我们取学习,当然代码只是供学习使用,实际项目中还是需要根据自己的项目需要灵活应用. &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;回...
复制链接

扫一扫

专栏目录