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 获得。查询选择器(ID)。offsettop)、方向(第三个参数)以及是否变速滚动(第四个参数)。

转载请注明：汇站网 » JavaScript | JS 定位滚动动画