JavaScript | JS 锚点定位滚动带动画

JS 锚点定位滚动带动画，有如下的方式可以实现：

// id 为选择器写法 如 '#xxx'
document.querySelector(id).scrollIntoView({ behavior: 'smooth' }); // 有兼容性问题

但是上面这种方式会有兼容性问题，在某些浏览器上滚动的距离不一样，就会造成偏差，所以手动写了一个：

/**
 * 界面变速或匀速滚动，只关注前四个参数，后面的参数为减少变量定义而存在
 * @param {Number} initTop 当前浏览器的滚动的高度，可使用 document.documentElement.scrollTop 获取
 * @param {Number} offset 需要移动的距离
 * @param {Number} down 是否是向下滚动是则为 1，向上为 -1
 * @param {Bool} a 是否变速运动
 * @param {Number} moved 总移动距离
 * @param {Number} i 每次移动的距离，通过计算而来
 * @param {Number} m 实际移动的距离，带有方向，正数为向下，负数为向上，为减少变量定义而存在，无需关注
 */
function anim(initTop, offset, down, a = false, moved = 0, i = 1, m = 0) {
  setTimeout(() => {
    i = a ? moved < offset - 128 ? i * 1.02 : i / 1.6 : 16;
    i = i < 1 ? 1 : i;
    i = i > 32 ? 32 : i;
    moved += i;
    m = i * down;
    if (moved > offset) m = moved - offset;
    document.documentElement.scrollTop = initTop + m;
    if (moved < offset) {
      anim(initTop + m, offset, down, a, moved, i);
    }
  }, 1);
}

使用方式：
在需要使用滚动并带有动画时，获取到初始浏览器的滚动高度（第一个参数，可使用 document.documentElement.scrollTop 获取），然后把移动的距离（第二个参数，可使用 document.querySelector(id).offsetTop 获取某锚点的高度）、方向（第三个参数）和是否变速滚动（第四个参数）传入即可