亲宝软件园·资讯

展开

JavaScript动画返回顶部

camellia 人气:0

服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在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>

加载全部内容

相关教程
猜你喜欢
用户评论