本文记录了使用react的时候想要实现锚点跳转的解决方案。
传统解决方案
<a href="#scroll">
<button className="button">
<i className="text">跳转</i>
</button>
</a>
<div>
<a name="scroll"></a>
<p>跳到这里</p>
</div>
用这种传统的方式，如果是基于browserHistory，路径上加了hash值，但是并不会跳转到想要的锚点位置。
localhost:3000/demo#scroll
如果是基于hashHistory，虽然会跳转到想要的锚点位置，但是路径改变了。
localhost:3000/#/demo
=>
localhost:3000/#/scroll
基于browserHistory的解决方案
solugebefola提出的解决方案
scrollToAnchor() {
let anchorName = this.props.location.hash;
if (anchorName) {
anchorName = anchorName.replace("#","");
let anchorElement = document.getElementById(anchorName);
if(anchorElement) { anchorElement.scrollIntoView(); }
}
}
但是如果基于hashHistory的，就不能通过hash值来判断
基于hashHistory的解决方案
不能用hash值，那就只能通过query的方式来实现啦~
scrollToAnchor() {
let anchorName = t.props.location.query.anchorName;
if (anchorName) {
let anchorElement = document.getElementById(anchorName);
if(anchorElement) { anchorElement.scrollIntoView(); }
}
}
Support
scrollIntoView
