react在哈希路由的情况下使用锚点

Posted 2021-06-21 齐天大圣是我

 

<a onClick={() => this.scrollToAnchor(\'components\')}>锚点</a>

<div name="components" id="components">显示内容</div>

 

scrollToAnchor = anchorName => {

if (anchorName) {

// 找到锚点

const anchorElement = document.getElementById(anchorName)

// 如果对应id的锚点存在，就跳转到锚点

if (anchorElement) {

anchorElement.scrollIntoView({ block: \'start\', behavior: \'smooth\' })

}

}

}