原生JS返回顶部,带返回效果

有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了。那这个功能是怎么做到的呢。其实不算太难;

首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要什么样式都可以自己写上,再在上面设置一个id;

之后我们js中获取一下这个按钮的id,并且定义一个变量timer,方便接下来清除间隔器;

之后我们设置一个页面的滚动事件,在里面定义一个变量获取一下所滚动的高度;

再用一个判断语句来判断一下滚动的高度;我们在设置一个数来让按钮什么时候显示;

var oBtn = document.getElementById("btn");

var timer;

window.onscroll = function(){

  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if(scrollTop > 500){
    oBtn.style.display = 'block';
  }else{
    oBtn.style.display = 'none';
  }
}

之后在给按钮设置一个点击事件,我们要先清除一下间隔器来防止bug的出现,在判断一下现在所处的位置;再用一个变量来获取一下需要移动的距离;

之后再用一个变量来获取一下步长,再用一个变量来计算次数;之后设置一个间隔器,首先计算一下次数来,知道每次移动到什么位置,之后计算每次的位置,之后判断一下是否移动到顶部就行了

    oBtn.onclick = function(){
      clearInterval(timer);
      var start = document.documentElement.scrollTop || document.body.scrollTop;
      var dis = 0 - start;
      var count = Math.floor(1000 / 30);
      var n = 0;
      timer = setInterval(function () {
      n++;
      var a = 1 - n / count;
      var cur = start + (1 - Math.pow(a,3)) * dis;
      document.documentElement.scrollTop = document.body.scrollTop = cur;
      if(n == count){
        clearInterval(timer);
      }
    },30)
  }

转载于:https://www.cnblogs.com/Z-Xin/p/7020424.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值