utils 连续滚动到指定id(带#)的页面位置

刮刀丸

已于 2022-02-24 11:18:50 修改

阅读量267

点赞数

分类专栏： utils - 工具库文章标签： vue.js javascript elementui

于 2022-02-24 10:57:24 首次发布

本文链接：https://blog.csdn.net/weixin_45588452/article/details/123107069

版权

utils - 工具库专栏收录该内容

6 篇文章 0 订阅

订阅专栏

/**

* 默认从顶部滚动到指定id(带#)的地方，动画每20ms一次

* @param el 支持以下方式获取el：

* document.querySelector('.类名')

* document.querySelector('#ID')

* document.querySelector('tagname')


const scrollAnimation = function (el, _currentY = 0, gapHeight = 10) {
  if (el) {
    const _targetY = parseInt(el.offsetTop);
    setTimeout(() => {
      const needScrollTop = _targetY - _currentY;
      _currentY = needScrollTop < 0 ? _currentY - gapHeight : _currentY + gapHeight;
      window.scrollTo(0, _currentY);
      if (needScrollTop > gapHeight || needScrollTop < -gapHeight) {
        scrollAnimation(el, _currentY, gapHeight);
      } else {
        window.scrollTo(_currentY, _targetY);
      }
    }, 0);
  } else {
    console.log('el is null');
  }
};