跳转到另一页面固定锚点，参数带在url上

 在需要跳转页，触发跳转

window.open('/xxx/yyy/zzz#detail')

在接收跳转页并到固定锚点，进行判断并使用 scrollTo 方法进行页面滚动 ，调用scrollTo 的对象是 document.querySelector('.layout-content')，而不是window，原因是react项目切换路由，没有回到顶部

useEffect(
    () => {
      if (window.location.hash === '#detail') {
        let anchorElement = document.querySelector(window.location.hash)
        document
          .querySelector('.layout-content')
          .scrollTo(0, anchorElement.offsetTop)
      }
    },
    []
  )
<div className={styles['over']}>
  {children}
  <div id='detail' />	
</div>

使用的是 id=detail这个元素

按说是没有问题的，但由于我的页面长，需要滚动的位置比较靠后，其距离顶部的高度，大于 .layout-content 的高度，就导致每次只能滚动到的位置是 document.querySelector('.layout-content') 这个div的高度，因为.layout-content这个div并不是撑起页面的。

不过 在我的写法是最外面的 .over 这个div。所以处理是给这个 .over 元素设置高度，让其子元素可以感知到自己所处的问题，从而滚动到正确位置。

.over {
  height: calc(100vh + 70rem);
}