原生JS实现回到顶部的效果

100次阅读
没有评论

共计 1607 个字符,预计需要花费 5 分钟才能阅读完成。

我们在浏览网页时通常会看到有返回顶部的按钮。当我们移动鼠标滑轮或者方向键时使页面开始滚动,如果我们滚动了一会想回到页面顶部时,这个时候就需要回到顶部按钮,那这个按钮是怎么实现的呢?

JS 实现滚动

其实很简单,利用下列函数就可以实现:

/*
 * func: 实现页面滚动到顶部的效果,* 离顶部越近滚动速度越慢
 * @acceleration: 滑动的加速度
 * @time: 延迟时间
 */
function goTop(acceleration, time) {
  let xScroll = document.documentElement.scrollLeft || document.body.scrollLeft || window.scrollLeft || 0,   // 获取水平滚动坐标
      yScroll = document.documentElement.scrollTop ||document.body.scrollTop || window.scrollTop || 0,  // 获取垂直滚动坐标
      speed = 1 + acceleration; // 滚动速度

  window.scrollTo(Math.floor(xScroll / speed), Math.floor(yScroll / speed)); // 屏幕滚动到某个坐标,因为 speed 大于 1,所以 x、y 轴的坐标越来越小


  if (xScroll > 0 || yScroll > 0) { // 如果没有滚动到顶部就设置延迟 time 后继续滚动
      setTimeout(() => {goTop(acceleration, time);
      }, time);
  }
}

返回顶部 的按钮上绑定onClick="goTop();" 就可以实现返回顶部操作。

这里用到的关键语句:

xScroll = document.documentElement.scrollLeft || document.body.scrollLeft || window.scrollLeft || 0;

其实这三个值的效果都差不多,都代表滚动条水平移动的像素,只是浏览器兼容性可能有所不同,所以这样写兼容性更好。

然后就是 window.scrollTo(x, y) 方法。该方法使当前窗口滚动到指定的 x、y 像素坐标。之所以除以 speed,这样就以一定的速度慢慢减小,达到缓慢的动画效果。

之后判断如果滚动条距离顶部还有一段距离的话,就继续循环调用该函数,并设置一定的延迟时间,以达到平滑滚动的动画效果。这里的 time 值要设置的比较小,超过 100 就显得比较不自然了。

按钮的样式设置

滚动特效实现了,但一般我们只有当页面发生滚动并且滚动到一定距离时才想要回到顶部,我们希望回到顶部的按钮在一定情况下才出现,于是我们需要设置按钮何时出现。通过在 scroll 事件上绑定函数:

let scrollBtn = document.getElementsByClassName('scroll2Top-btn')[0];
  window.addEventListener('scroll', () => { // 这里用了 ES6 语法
    let contentTop = document.documentElement.clientHeight || window.innerHeight, // 获取当前可视窗口的高度
      scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  // 获取垂直滚动条距离页面顶部的距离

    if (contentTop < scrollTop) { // 如果可视窗口的高度小于垂直滚动的距离,说明已经向下滚动超过一个可视窗口的距离,也就是说看不到顶部了,于是就设置按钮可见
      scrollBtn.style.display = "block";
    } else {scrollBtn.style.display = "none";}
  });

通过这两个简单的函数,实现了回到顶部的滚动效果,全部用原生 JS 编写,简单又实用。

正文完
 
西蒙
版权声明:本站原创文章,由 西蒙 2017-08-22发表,共计1607字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码