最近在优化自己的网站,需要对吧网站上一些标题啥的可以直接快速跳过去,于是就研究了一下js的scrollTo相关函数,具体如下:

一、直接通过scrollIntoView跳转到对应的元素位置

这个存在一个问题,比如我有固定的导航栏,同时用的是position: fixed来定位,使用这个方法就存在问题,可能div被遮挡。于是就可以考虑window.scrollTo

  1. document.getElementById('scroll').scrollIntoView({
  2. block: 'start',
  3. inline: 'nearest',
  4. behavior: 'smooth'
  5. })

二、通过window.scrollTo跳转到对应的元素位置,支持设置偏移量

这个方法避免scrollIntoView导致的遮挡,但是存在一个很严重的问题,如果你目前整个页面是在最顶部,没有向下滑动,那么没有问题,这个方法OK。如果你手动向下滚动了,那么对不起,它定位开始不准了,就很尴尬。

  1. var element = document.getElementById(anchorId);
  2. var headerOffset = 70;//顶部需要空70px,即我的导航栏高度
  3. var elementPosition = element.getBoundingClientRect().top;
  4. console.log(element.getBoundingClientRect().top)
  5. var offsetPosition = elementPosition - headerOffset;
  6. window.scrollTo({
  7. top: offsetPosition,
  8. behavior: "smooth"
  9. });

三、通过document.documentElement.scrollTop跳转到对应的元素位置,支持设置偏移量,同时避免了window.scrollTo导致的定位不准的问题

这个方法是找了很多帖子,有人遇到同样的问题,有大佬解决了。
原贴地址:
Javascript scrollintoview smooth scroll and offset

  1. var element = document.getElementById(anchorId);
  2. var headerOffset = 70;
  3. ar elementPosition = element.offsetTop;
  4. var offsetPosition = elementPosition - headerOffset;
  5. document.documentElement.scrollTop = offsetPosition;
  6. document.body.scrollTop = offsetPosition; // For Safari