React Js 实现锚点定位的集中方法

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" });
}

补充知识点 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo