锚点设置 scrollIntoView

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

基本语法：

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

1. alignToTop

布尔值：true——元素的顶端将和其所在滚动区的可视区域的顶端对齐。

               false——元素的底端将和其所在滚动区的可视区域的底端对齐。

2. scrollIntoViewOptions

对象：behavior——定义过渡动画效果。（可选：默认auto，smooth）

           block——定义垂直方向对齐。（可选：默认start，center，end，nearest_最近的）

           inline——定义水平方向对齐。（可选：start，center，end，默认nearest_最近的）

使用：

定义方法：

const scrollToAnchor = (anchor) => anchor && document.getElementById(anchor).scrollIntoView({ block: 'start', behavior: 'smooth' })

定义锚点： 

<a className={style.title} onClick={()=>scrollToAnchor('invitationInfo')}>招标单详情</a>

容器：

<div id="invitationInfo" className={style.cardInfoWrapper}></div>

 

Elenment：是一个通用性非常强的基类。所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。

详情：Element - Web API 接口参考 | MDN (mozilla.org)