页面锚点，点击跳转页面某固定位置(scrollIntoView)

常用场景：页面锚点，点击跳转页面某固定位置

1.element.scrollToView()

    （1）当页面有fixed顶部的布局时，由于fixed布局的元素脱离文档流，被scrollToView()的元素会被置顶到页面最顶部，导致部分被fixed布局的元素遮挡，因此不太适用。

   （2）可用于页面没有fixed布局，常见的是顶部需要固定位置时可用element.scrollToView()，但是当点击的元素没有当前页面的高度（100vh）时，会出现整个页面上移的情况。

    此时可用的解决办法是将最外层容器元素设置为fixed布局

.box{

position: fixed;
top:0;
left:0;
right:0;
bottom:0;
overflow-y: scroll;

}

 

用法：

<div id="anchorName">123</div>

 

  scrollToAnchor = (anchorName) => {
    if (anchorName) {
      let anchorElement = document.getElementById(anchorName); //取到需要移动的元素
      if (anchorElement) {
        anchorElement.scrollIntoView({
          behavior: 'smooth',
        });
      }
    }
 

2.element.scroll()

    此方法比较通用，不管页面有何布局都可以用，计算元素离顶部的距离，然后向上移动对应的距离即可

scrollToAnchor = () => {
  let element = document.getElementById('xx');
  let height = document.getElementById('xx').offsetTop; //计算需要向上移动的距离
  element.scroll({
    top: height, //向上移动的距离，如果有fixede布局， 直接减去对应距离即可
    behavior: 'smooth', // 平滑移动
  });
}

scrollIntoView详细文档：

https://developer.mozilla.org/zh-cn/docs/web/api/element/scrollintoview

建议使用第二种方法