【实用代码】JavaScript | JS 锚点定位滚动带动画

图片[1]-【实用代码】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);
}
© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情图片