控制页面滚动到某一点

需求背景

  在前端项目开发中,当页面展示的内容较多时一般需要页面具有”回到某处”的功能。实现的效果如图1动态图片所示。
回到某处效果展示

图 1 页面"回到某处"功能效果展示

实现方案

  通过document.documentElement.scrollTop或者document.body.scrollTop(兼容Chrome和Safari)设置当前页面的滚动量就可以控制页面竖直滚动到对应的位置。为了实现页面的匀速滚动效果,需要在固定的时间间隔内控制页面滚动固定的距离。传统的方案是使用setInterval函数来定期设置页面的滚动距离,但是由于setInterval中回调函数执行的时间间隔并不准确,容易造成页面不流畅的滚动。采用window的requestAnimationFrame属性可以实现页面流畅的滚动。
  requestAnimationFrame属性接受一个回调函数作为参数,requestAnimationFrame的功能是告诉浏览器在下一次页面重绘(浏览器的重绘间隔一般是1/60秒)之前执行回调函数。利用requestAnimationFrame的功能,我们可以在浏览器重绘页面之前就更新页面的滚动距离,即可以实现流畅的匀速滚动效果。
  requestAnimationFrame的缺点在于浏览器的兼容性问题,低版本的浏览器并不支持该属性,因此需要对该属性写polyfill。requestAnimationFrame的polyfill写法示例如下:

1
2
3
4
5
6
7
const polyfill = function(callback) {
return window.setTimeout(callback, 1000 / 60);
};
const getRequestAnimationFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || polyfill;
};

完整的代码实现

  根据上述实现方案,笔者编写了一个控制页面滚动到任意目的地的组件scrollTo,并将代码合并到了自己的js武器库jslever中。scrollTo组件的使用可以参考jslever项目仓库下的README文件。