React Js 实现锚点定位的集中方法
注：以水平锚点定位为例，垂直方向亦如此
方法1. url hash值跳转
到达页面可视位置，滚动区域的左/右边，无滚动的平滑效果，效果差。
设置，用户点击并跳转
<a href="#anchorId">锚点1</a>
待跳转标识的位置，使用id
<div id="anchorId">锚点1</div>
或使用a标签，name属性
<a name="anchorId"></a>
可代码控制锚点跳转
window.location.hash = anchorId;
补充知识点 http://www.ruanyifeng.com/blog/2011/03/url_hash.html
hash，url中的锚点信息部分。以#开始后面内容，代表网页中的一个位置，改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，但会改变浏览器的访问历史（非IE）
方法2. scrollToAnchor
内容定位到滚动容器可视区域，滚动区域正中间，较难控制定位位置，有滚动滑动效果，h5新增api，存在浏览器兼容性，效果一般。
待跳转标识的位置
<a id="screens"></a>
定位函数
scrollToAnchor = (anchorId) => {
if (anchorId) { // 找到锚点 id
let anchorElement = document.getElementById(anchorId);
if(anchorElement) { // 如果对应id的锚点存在，就跳转到锚点
anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});
}
}
}
补充知识点 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
scrollIntoView h5新增api，存在浏览器兼容性；取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端
方法3. 滚动容器的scrollLeft设置为需要定位元素的offsetLeft
内容定位到滚动容器可视区域，位置定位到靠左（靠右，可自行计算），无滚动滑动效果。实现简单，效果呆板。
let scrollElement = document.getElementById(scrollId); // 对应id的滚动容器
let anchorElement = document.getElementById(anchorId); // 需要定位看到的锚点元素
if(scrollElement) {
scrollElement.scrollLeft = anchorElement.offsetLeft;
}
补充知识点 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollLeft
scrollLeft 代表元素滚动条距离元素左边多少像素
方法4. 滚动容器 scrollTo()
内容定位到滚动容器可视区域，位置定位到靠左，有滚动滑动效果，效果好。
let scrollElement = document.getElementById(scrollId); // 对应id的滚动容器
let anchorElement = document.getElementById(anchorId); // 需要定位看到的锚点元素
if(scrollElement) {
scrollElement.scrollTo({left: anchorElement.offsetLeft, behavior: "smooth" });
}