提示:
要實作錨點捲動,不要使用a標籤,因為這樣會引發路由跳轉。
(學習影片分享:react影片教學)
這裡使用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,然後用下面的函數來找到錨點並跳到錨點。
相關推薦:react教學
以上是react怎麼實現錨點滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章!