react實現錨點

實現錨點滾動,不要使用<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,然后用下面的函數來找到錨點并跳轉到錨點。
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,057評論 25 708
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 12,861評論 2 59
  • Swift1> Swift和OC的區別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,135評論 1 32
  • 是在網上看到人生導師金東蛋的推薦才想來看這本書,本來覺得看這個書名是一個比較壓抑的書,但是看了書評應該是溫馨的故...
    小碳碳閱讀 245評論 0 0
  • 當你明白一朵花,再嬌艷,終會凋零, 而后去欣賞它,你才是真的懂了美; 當你懂得一個姑娘,再俊俏,都會老去, 而後去...
    蜜婼閱讀 257評論 0 5