页面滚至顶部的缓动效果

卡卡西最近怎么样

已于 2022-04-28 15:50:14 修改

阅读量920

点赞数 13

分类专栏： JavaScript 零基础入门文章标签： javascript 前端开发语言 html css

于 2022-04-01 19:13:23 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/123905086

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章 42 订阅

订阅专栏

我们之前的文章写过一个淘宝侧边栏的案例，在这个案例中我们的页面下滑至一定长度后侧边栏除了变为固定定位外还多出了一个回到顶部的盒子，我们要求其点击后就可以回到顶部，我们通常会想到直接给 a 标签的 href 属性设置值为 #，这的确可以回到顶部，但是其是直接回到顶部，一点也不美观，我们想要那种缓缓地到达顶部的优雅效果（咳咳咳），这时我们仍然要用到我们的老朋友 -------- 动画函数，除此之外还需要用到一个 window.scroll 的滚动方法，我们首先讲一下这个方法

window.scroll：

此代码中，我们设置了三个盒子，让页面能滚动起来，在页面最下方有一个按钮，点击后即可让页面滚动至目标位置，scroll (x,y)，x代表横向滚动，y代表竖直方向滚动，不需要带单位，滚动后再打印输出一个当前页面被卷上去的距离，当前距离按理应该等于我们的 y

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <button>按钮</button>
    <script>
       var btn=document.querySelector('button');
       btn.addEventListener('click',function(){
           window.scroll(0,100);
           console.log(window.pageYOffset);
       })
    </script>
</body>

可见我们的输出值确实是y的值，100：

有了这个方法，我们就可以将我们的动画函数进行改造一番：

改造后的动画函数：

 function run(obj,aim,callback){
        clearInterval(obj.timer)
        obj.timer=setInterval(function(){
            if(aim==window.pageYOffset){  //当页面滚上去的距离等于我们的目标值时，就停止计时器
                clearInterval(obj.timer);
                if(callback){
                    callback();
                }
            }else{
                step=(aim-window.pageYOffset)/10;
             step=step>0?Math.ceil(step):Math.floor(step);
            window.scroll(0,window.pageYOffset+step);  //定时器每执行一次就让页面滚动一次，x=0，因为横向不需要滚动
            }
        },20)
    }

然后再在a标签的点击事件里调用我们的动画函数就好啦
 a.addEventListener('click',function(){
         run(window,0);
    })

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      position: absolute;
      right: 0px;
      top: 300px;
      width: 100px;
      border: 1px solid;
      background-color: rgb(97, 97, 97);
    }
    .top{
      width: 90px; 
      height: 150px;
      margin: 5px;
      background-color: rgb(255, 187, 79);
    }
    .center{
      width: 90px; 
      height: 70px;
      margin: 5px;
      background-color: rgb(165, 165, 165);
      display: none;
    }
    .bottom{
      width: 90px; 
      height: 150px;
      margin: 5px;
      background-color: rgb(202, 96, 35);
    }

    .left{
      float: left;
      margin-right: 10px;
      width: 110px;
      height: 2200px;
      background-color: rgb(99, 99, 99);
    }
    .right{
      box-sizing: border-box;
      float: left;
      width: 1200px;
      height: 2200px;
      background-color: rgb(98, 98, 98);
      padding: 10px;
    }
    .innertop{
      box-sizing: border-box;
      width: 1180px;
      height: 230px;
      margin-bottom: 10px;
      background-color: rgb(155, 155, 155);
    }
    .innercenter{
      box-sizing: border-box;
      width: 1180px;
      height: 530px;
      margin-bottom: 10px;
      background-color: rgb(155, 155, 155);
    }
    .innerbottom{
      box-sizing: border-box;
      width: 1180px;
      height: 1330px;
      margin-bottom: 10px;
      background-color: rgb(155, 155, 155);
    }
    a{
      color: azure;
      padding: 11px;
      text-align: center;
      line-height: 70px;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="box">
      <div class="top"></div>
      <div class="center"><a href="javascript::">回到顶部</a></div>
      <div class="bottom"></div>
  </div>
  <div class="left"></div>
  <div class="right">
    <div class="innertop"></div>
    <div class="innercenter"></div>
    <div class="innerbottom"></div>
  </div>
  <script>
    var topbox=document.querySelector('.innertop')
    var centerbox=document.querySelector('.innercenter')
    var bottombox=document.querySelector('.innerbottom')
    var box=document.querySelector('.box');
    var a=document.querySelector('a');
    var center=document.querySelector('.center')
    var distance1=window.centerbox.offsetTop;
    var distance2=window.box.offsetTop-distance1
    var distance3=window.bottombox.offsetTop
    window.addEventListener('scroll',function(){
      if(window.pageYOffset>=distance1){
        box.style.position='fixed'
        box.style.top=distance2+'px'
      }else{
        box.style.position='absolute'
        box.style.top=300 +'px'
      }
      if(window.pageYOffset>=distance3){
        center.style.display='block'
      }else{
        center.style.display='none'
      }
    })
    function run(obj,aim,callback){
        clearInterval(obj.timer)
        obj.timer=setInterval(function(){
            if(aim==window.pageYOffset){
                clearInterval(obj.timer);
                if(callback){
                    callback();
                }
            }else{
                step=(aim-window.pageYOffset)/10;
             step=step>0?Math.ceil(step):Math.floor(step);
            window.scroll(0,window.pageYOffset+step);
            }
        },20)
    }
    a.addEventListener('click',function(){
         run(window,0);
    })
  </script>
</body>
</html>

卡卡西最近怎么样

关注

13
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
页面滚至顶部的缓动效果

我们之前的文章写过一个淘宝侧边栏的案例，在这个案例中我们的页面下滑至一定长度后侧边栏除了变为固定定位外还多出了一个回到顶部的盒子，我们要求其点击后就可以回到顶部，我们通常会想到直接给 a 标签的 href 属性设置值为 #，这的确可以回到顶部，但是其是直接回到顶部，一点也不美观，我们想要那种缓缓地到达顶部的优雅效果（咳咳咳），这时我们仍然要用到我们的老朋友 -------- 动画函数，除此之外还需要用到一个 window.scroll 的滚动方法，我们首先讲一下这个方法window...
复制链接

扫一扫