先看效果：

代码：

其中scrollUtil.js:

const scrollUtil = {/*** 滚动到目标offsetTop* @param {*} targetOffsetTop 目标offsetTop*/scrollTo: function (targetOffsetTop) {// 当前offsetToplet scrollTop =document.documentElement.scrollTop || document.body.scrollTop;// 定义一次跳50个像素，数字越大跳得越快，但是会有掉帧得感觉const STEP = 50;// 判断是往下滑还是往上滑if (scrollTop > targetOffsetTop) {// 往上滑smoothUp();} else {// 往下滑smoothDown();}// 定义往下滑函数function smoothDown() {// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置if (scrollTop < targetOffsetTop) {// 如果和目标相差距离大于等于 STEP 就跳 STEP// 否则直接跳到目标点，目标是为了防止跳过了。if (targetOffsetTop - scrollTop >= STEP) {scrollTop += STEP;} else {scrollTop = targetOffsetTop;}document.body.scrollTop = scrollTop;document.documentElement.scrollTop = scrollTop;// 屏幕在绘制下一帧时会回调传给 requestAnimationFrame 的函数// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高requestAnimationFrame(smoothDown);}}// 定义往上滑函数function smoothUp() {if (scrollTop > targetOffsetTop) {if (scrollTop - targetOffsetTop >= STEP) {scrollTop -= STEP;} else {scrollTop = targetOffsetTop;}document.body.scrollTop = scrollTop;document.documentElement.scrollTop = scrollTop;requestAnimationFrame(smoothUp);}}},
};export default scrollUtil;

注意：样式要加box-sizing配置，消除border的影响，否则左边index根据页面滚动定位会不准确

没加box-sizing，offsetTopArr的打印结果：

加了box-sizing，offsetTopArr的打印结果：