組件
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 />
</div>
</div>
);
}
}
export default HomeView;
scrollIntoView的語法
用法如下:
element.scrollIntoView();
element.scrollIntoView(true);
element.scrollIntoView(alignToTop);
element.scrollIntoView(scrollIntoViewOptions);
alignToTop是一個(gè)布爾值苗沧，true 元素對齊到祖先元素的頂部，false 元素對齊到祖先元素的底部个曙，默認(rèn)是true
scrollIntoViewOptions是一個(gè)布爾值或以下選項(xiàng)的對象：
{
behavior: 'auto' | 'instant' | 'smooth',
block: 'start' | 'end'
}
