JavaScript实现网页带动画返回顶部的方法详解-前端开发

JavaScript实现网页带动画返回顶部的方法详解服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在git上的,但是搬家的时候,可能是着急了,之前有些新加的文件没有托管到git上,所以,就丢了. 不过无所谓了,可以重新写嘛. 之前博客的回到顶部功

服务器由阿里云换到了腾讯云，我的代码之前一直都是托管在git上的，但是搬家的时候，可能是着急了，之前有些新加的文件没有托管到git上，所以，就丢了。

不过无所谓了，可以重新写嘛。

之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的，这次打算自己尝试一下。

返回顶部无非就是锚点。

第一个版本：

<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实现网页带动画返回顶部的方法详解的文章就介绍到这了,更多相关JavaScript动画返回顶部内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！