html5网页自动滚动,分享一个页面平滑滚动小技巧(推荐)

背景

今天写需求的时候发现一个小的优化点：用户选择了一些数据之后, 对应列表中的数据需要高亮， 有时候列表很长， 为了提升用户体验，需要加个滚动， 自动滚动到目标位置。

简单的处理了一下， 问题顺利解决， 就把这个小技巧分享一下给大家。

正文

有几种不同的方式来解决这个小问题。

1.scrollTop

第一想到的还是scrollTop, 获取元素的位置， 然后直接设置:

// 设置滚动的距离

element.scrollTop = value;

不过这样子有点生硬， 可以加个缓动：

var scrollSmoothTo = function (position) {

if (!window.requestAnimationFrame) {

window.requestAnimationFrame = function(callback, element) {

return setTimeout(callback, 17);

};

}

// 当前滚动高度

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

// 滚动step方法

var step = function () {

// 距离目标滚动距离

var distance = position - scrollTop;

// 目标滚动位置

scrollTop = scrollTo