锚点：
超链接的一种形式，快速定位到想要看的位置，常用在文章目录等位置。
那么问题来了
React不支持原生锚点的书写方式
所以怎么在React里实现类似锚点的效果
我的解题思路
1.在 url里 使用 anchor 参数
2.页面 解析 是否有anchor参数对应的id
3.有对应id的话, 滚动到相应位置
代码实践
1.在 url里 添加 anchor 参数
<a link={child.link}>{child.name}</a>
2.页面 解析 是否有anchor参数对应的id
A.解析URL函数
getURLStuff(stuff) {let url = window.location.hash;let query = url.split("?").length > 1 ? url.split("?")[1] : "";let param = !!query ? query.split("&") : [];let resultSet = {};for (let i = 0; i < param.length; i++) {let params = param[i].split("=");if (params.length > 1) {resultSet[params[0]] = params[1];}}let result = resultSet[stuff] || "";return decodeURI(result);}
B.获取anchor对应的值
let anchor = this.getURLStuff("anchor");console.log("nlp anchor ", anchor);
3.有对应id的话, 滚动到相应位置，没有的话，滚动到头部
html 代码：
<div className="basic-feature-title" id={info.anchor}>{info.title}</div>
JS代码:
// 对应id的话, 滚动到相应位置if (!!anchor) {let anchorElement = document.getElementById(anchor);if (anchorElement) {window.scrollTo(0, anchorElement.offsetTop - window.innerHeight / 2);}}// 没有的话，滚动到头部else {document.body.scrollTop = document.documentElement.scrollTop = 0;}
注意：
这里没有使用scrollIntoView主要是滚动效果不理想，只会滚动到可视区域，不一定会到页面正中，所以建议使用下列代码
window.scrollTo(0, anchorElement.offsetTop - window.innerHeight / 2);
惯例上DEMO:
codepen链接
PS: 由于codepen内嵌iframe所以没办法用url调整，我用state做了个大致的效果，大家可以参考下~
原理：
锚点实现原理是:target选择器
感兴趣的同学可以点击下方参考链接继续学习：
1.URL锚点HTML定位技术机制、应用与问题
2.CSS3 :target 选择器
