项目场景：

在项目中需要根据当前组件的componentId来定位到页面的顶部显示。

问题描述

本来想着使用最传统的方法，根据父盒子的高度和子盒子的高度……等，后来发现跟页面布局有关系，使用这种方法会导致跳转不准确，第一次点击可以第二次不行，然后反复尝试……，后续我就想到了它scrollIntoView()。

可能会有小伙伴疑问：“为什么不用scrollTo？”，其实我也想，但是父级盒子不是最外层的啊，scrollTo只能由window调用也就是只能控制最外层的盒子滚动。

但是老天就是不眷顾我这个苦逼，玛德跳转是行了，再紧接着tabs页面也往上偏移了一点……

原因分析：

提示：原因不道!就很奇妙

解决方案：

1、使用fixed固定定位父级元素

注意：

这边固定定位的盒子是滚动元素的父级（就是带滚动条盒子）

<style>
  /* 解决父级盒子向上偏移 */
  parentBox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  }
</style>

2、控制父元素的scrollTop

舍弃scrollIntoView()方法，根据控制父元素的滚动top值，来实现定位。

这种方式最好，因为scrollIntoView()方法会有兼容性问题，像丝滑滚动对于谷歌、火狐和微软这仨浏览器兼容性好。

function jump(id){
  const comDom = document.getElementById('' + id + ''); //当前要定位的DOM元素
  const offsetTop = comDom?.offsetTop - 5; //元素距离外部盒子顶部的高度（-5是为避免被覆盖物遮挡）
  const scrollTopDom = document.getElementsByClassName('van-tabs__content')[0] || {}; // 滚动元素的父级
  scrollTopDom.scrollTop = offsetTop; // 设置父元素的滚动条位置
  console.log('----------跳转成功----------')；
}

上述 -5 为避免fixed覆盖物元素遮挡可以参考这篇文章

目前只是单纯的跳转，要想实现自动滚动，我们需要给滚动的盒子加上scroll-behavior: smooth;，这样就可以实现丝滑的自动跳转了！

注意事项:

offsetTop 不一定是相对于父元素的，如果有很多父元素的话，它是相对于第一个定位的父元素 的。

如果第一个父元素未定位(相对 relative 、绝对 absolute 或固定 fixed )，则可能需要将第二行更改为:

父级元素.scrollTop = 当前元素,offsetTop - 父级元素.offsetTop;