用JavaScript怎样写带动画效果的返回顶部-群英

上一篇：js数组无效值类型如何去除呢，方法有什么下一篇：TypeScript Duck类型是什么，怎样命名和应用

在实际应用中，我们有时候会遇到“用JavaScript怎样写带动画效果的返回顶部”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“用JavaScript怎样写带动画效果的返回顶部”文章能帮助大家解决问题。

返回顶部无非就是锚点。

第一个版本：

<body style="height:2000px;">
    <div id="topAnchor"></div>
    <a href="#topAnchor" rel="external nofollow"  style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>

这个没用js，单纯的使用锚点试了一下，好用。

好用是好用，但是用户体验不是很好，嗖的一下就回到顶部了。不好。

我不太喜欢使用jquery，不管坐什么都喜欢用原生，所以，我这里用原生JavaScript写了一个带动画的，大概是这样。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>返回顶部</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 2000px;
            width: 100%;
        }
        .to_top{
            width: 60px;
            height: 60px;
            bottom: 10%;
            right: 20px;
            font-size: 40px;
            line-height: 70px;
            border: none;
            background: rgba(0,0,0,0.2);
            cursor: pointer;
            opacity: 0;
            transition: all 1s;
            /*使点前标签始终置于最上层*/
            position: fixed;
            z-index: 99999;
        }
    </style>
</head>
<body>
    <div class="to_top">
        <img src="https://guanchao.site/uploads/gotop/timg.jpg" alt="" width="70;">
    </div>
    <script type="text/javascript">
        window.onscroll = function(){
            var timer = null;//时间标识符
            var isTop = true;

            var obtn = document.getElementsByClassName('to_top')[0];
            obtn.onclick = function(){
                // 设置定时器
                timer = setInterval(function(){
                    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    //减小的速度
                    var isSpeed = Math.floor(-osTop/6);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed;
                    //判断，然后清除定时器
                    if (osTop == 0) {
                        clearInterval(timer);
                    }
                    isTop = true;//添加在obtn.onclick事件的timer中
                },30);
            };
            //获取页面的可视窗口高度
            var client_height = document.documentElement.clientHeight || document.body.clientHeight;

            //在滚动的时候增加判断,忘了的话很容易出错
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (osTop >= client_height) {
                obtn.style.opacity = '1';
                }else{
                    obtn.style.opacity = '0';
                }
                if(!isTop){
                    clearInterval(timer);
                }
                isTop = false;

        }
    </script>
</body>
</html>

以上代码可以放到html文件中可以直接运行。

代码具体含义其中基本都有注释。

有看不懂的地方，请自行百度。

方法补充

其实实现返回顶部效果的方法有很多，除了上文的方法，小编也为大家整理一些其他方法，感兴趣的可以尝试下

方法一

//页面加载后触发
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);
  };
};

方法二

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>返回顶部效果</title>
     <style>
         .slider-bar {
             position: absolute;
             left: 47%;
             top: 300px;
             margin-left: 600px;
              45px;
             height: 130px;
             background-color: pink;
             cursor: pointer;
         }
         .w {
              1100px;
             margin: 10px auto;
         }
         .header {
             height: 150px;
             background-color: purple;
         }
         .banner {
             height: 250px;
             background-color: skyblue;
         }
         .main {
             height: 1000px;
             background-color: yellowgreen;
         }
         span {
             display: none;
             position: absolute;
             bottom: 0;
         }
     </style>
 </head>
 <body>
     <div class="slider-bar">
         <span class="goBack">返回顶部</span>
     </div>
     <div class="header w">头部区域</div>
     <div class="banner w">banner区域</div>
     <div class="main w">主体部分</div>

     <script>
         // querySelector() 方法返回匹配指定选择器（）的第一个元素，传的必须是字符串
         var sliderbar = document.querySelector('.slider-bar');
         var banner = document.querySelector('.banner');
         var bannerTop = banner.offsetTop; // banner模块距离顶部的长度
         var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏固定后距离顶部的长度

         var main = document.querySelector('.main');
         var goBack = document.querySelector('.goBack');
         var mainTop = main.offsetTop;  // main模块距离顶部的长度

         // scroll 屏幕发生滚动事件时执行
         document.addEventListener('scroll', function() {
             if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离
                 sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变为固定状态
                 sliderbar.style.top = sliderbarTop + 'px';
             } else {
                 sliderbar.style.position = 'absolute';
                 sliderbar.style.top = '300px';
             }

             if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮
                 goBack.style.display = 'block';
             } else {
                 goBack.style.display = 'none';
             }

         });
         sliderbar.addEventListener('click', function() {
             animate(window, 0);
         })

         /* 动画函数：
          *  obj 做动画的对象（这里就是指window）
          *  target 目标位置（顶部）
          *  callback 回调函数（没有传参的话就不执行）
          */
         function animate(obj, target, callback) {
             clearInterval(obj.timer);  // 先清除定时器，保证只有一个定时器在执行，以免出现bug
             obj.timer = setInterval(function() {
                 // window.pageYOffset距离顶部的距离（是负的）
                 var step = (target - window.pageYOffset) / 10;  // step步长（让页面速度逐渐变慢的滑动上去）
                 step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不总是整数。大于零向上取整,小于零向下取整
                 if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器
                     clearInterval(obj.timer);
                     //  判断是否传了回调函数
                     /* if(callback) {
                         callback();
                     } */
                     // 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()
                     callback && callback();
                 }
                 // window.scroll(x, y) 滚动到文档特定位置
                 window.scroll(0, window.pageYOffset + step);
             }, 15);
         }
     </script>
 </body>
 </html>

这篇关于“用JavaScript怎样写带动画效果的返回顶部”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！