页面滚至顶部的缓动效果

       我们之前的文章写过一个 淘宝侧边栏 的案例,在这个案例中我们的页面下滑至一定长度后侧边栏除了变为固定定位外还多出了一个回到顶部的盒子,我们要求其点击后就可以回到顶部,我们通常会想到直接给 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
    评论
你可以使用JavaScript来实现回到页面顶部效果。以下是一个简单的示例代码: ```javascript // 获取回到顶部按钮 var scrollToTopBtn = document.getElementById("scrollToTopBtn"); // 监听页面事件 window.onscroll = function() { // 如果页面超过100px,则显示回到顶部按钮,否则隐藏按钮 if (document.documentElement.scrollTop > 100 || document.body.scrollTop > 100) { scrollToTopBtn.style.display = "block"; } else { scrollToTopBtn.style.display = "none"; } }; // 监听回到顶部按钮的点击事件 scrollToTopBtn.onclick = function() { // 使用平滑效果回到页面顶部 scrollToTop(0, 500); // 第一个参数为目标位置,第二个参数为时间(毫秒) }; // 定义平滑函数 function scrollToTop(to, duration) { if (duration <= 0) return; var difference = to - document.documentElement.scrollTop || document.body.scrollTop; var perTick = difference / duration * 10; setTimeout(function() { document.documentElement.scrollTop += perTick; document.body.scrollTop += perTick; if (document.documentElement.scrollTop === to || document.body.scrollTop === to) return; scrollToTop(to, duration - 10); }, 10); } ``` 在上面的代码中,首先获取了回到顶部按钮的元素,并监听了页面事件。当页面超过100px时,显示回到顶部按钮,否则隐藏按钮。点击回到顶部按钮时,调用`scrollToTop`函数实现平滑效果回到页面顶部。该函数使用递归实现每隔10毫秒一段距离,直到到目标位置或时间结束。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡卡西最近怎么样

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值