解決方案描述
實現(xiàn)錨點滾動, 不要用<a>標簽, 因為會觸發(fā)路由跳轉(zhuǎn)
可以使用H5提供的API scrollToAnchor
scrollToAnchor = (anchorName) => {
if (anchorName) {
let anchorElement = document.getElementById(anchorName);
if(anchorElement) { anchorElement.scrollIntoView(); }
}
}
示例
不用scrollToAnchor的情況
<div className="android-be-together-section mdl-typography--text-center">
<div className="logo-font android-slogan">be together. not the same.</div>
<div className="logo-font android-sub-slogan">welcome to android... be yourself. do your thing. see what's going on.</div>
<div className="logo-font android-create-character">
<a href=""><img src="images/andy.png" /> create your android character</a>
</div>
// 紅色按鈕
<a href="#screens">
<button className="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i className="material-icons">expand_more</i>
</button>
</a>
</div>
<div className="mdl-grid" style={{height: 800}}>
//需要跳轉(zhuǎn)到的錨點
<a name="screens"></a>
跳到這里
<br />
跳到這里
<br />
跳到這里
<br />
跳到這里
<br />
跳到這里
<br />
跳到這里
<br />
跳到這里
<br />
</div>
如上所述, 這樣遇到了<a>標簽href=“#xxx”的時候装哆，會進行單頁前端路由跳轉(zhuǎn)的問題阵难。
于是利用上述scrollToAnchorAPI進行修改
class HomeView extends Component {
scrollToAnchor = (anchorName) => {
if (anchorName) {
let anchorElement = document.getElementById(anchorName);
if(anchorElement) { anchorElement.scrollIntoView(); }
}
}
render() {
return (
<div>
<div className="android-be-together-section mdl-typography--text-center">
<div className="logo-font android-slogan">be together. not the same.</div>
<div className="logo-font android-sub-slogan">welcome to android... be yourself. do your thing. see what's going on.</div>
<div className="logo-font android-create-character">
<a href=""><img src="images/andy.png" /> create your android character</a>
</div>
<a onClick={()=>this.scrollToAnchor('screens')}>
<button className="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i className="material-icons">expand_more</i>
</button>
</a>
</div>
<div className="mdl-grid" style={{height: 800}}>
<a id="screens"></a>
跳到這里
<br />
跳到這里
<br />
跳到這里
<br />
跳到這里
<br />
跳到這里
<br />
跳到這里
<br />
跳到這里
<br />
</div>
</div>
);
}
}
export default HomeView;
我們進行了兩個修改：
- 將錨點用傳統(tǒng)的name屬性，改成id屬性。這樣我們就可以用document.getElementById方法方便的查詢查詢到錨點端逼。
- 將原來的紅色按鈕的href屬性去掉，然后添加一個onClick方法孝扛。onClick方法傳入一個錨點的id舀锨，然后用下面的函數(shù)來找到錨點并跳轉(zhuǎn)到錨點。
scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到錨點
let anchorElement = document.getElementById(anchorName);
// 如果對應(yīng)id的錨點存在沪编，就跳轉(zhuǎn)到錨點
if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
}
}
scrollIntoView的語法
用法如下:
element.scrollIntoView();
element.scrollIntoView(true);
element.scrollIntoView(alignToTop);
element.scrollIntoView(scrollIntoViewOptions);
alignToTop是一個布爾值呼盆，true 元素對齊到祖先元素的頂部，false 元素對齊到祖先元素的底部蚁廓，默認是true
scrollIntoViewOptions是一個布爾值或以下選項的對象：
{
behavior: 'auto' | 'instant' | 'smooth',
block: 'start' | 'end'
}
smooth: 帶滾動動畫
原文參照: https://zhuanlan.zhihu.com/p/25294428?refer=c_78280513
