實現錨點滾動,不要使用<a>標簽,會引發路由跳轉。
我們使用H5的新增API,scrollToAnchor
以前使用<a>標簽的方法
<a href='#activity1'></a> //定義錨點
<div name='activity1'></div> //跳轉到的錨點
但是在單頁面中,這樣會進行前端路由的修改
使用scrollToAnchor API進行修改
<a onClick={() => this.scrollToAnchor(name)}></a> //定義錨點
<div id='activity1'></div> //跳轉到的錨點
//函數定義
scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到錨點
let anchorElement = document.getElementById(anchorName);
// 如果對應id的錨點存在,就跳轉到錨點
if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
}
}
block:表示滾動到錨點的頂部或者底部,start/end
behavior:表示滾動的效果,auto/instant/smooth(滾動效果)
1.將錨點用傳統的name屬性,改成id屬性。這樣我們就可以用document.getElementById方法方便的查詢查詢到錨點。
2.將原來的紅色按鈕的href屬性去掉,然后添加一個onClick方法。onClick方法傳入一個錨點的id,然后用下面的函數來找到錨點并跳轉到錨點。