React實現動畫錨點滾動效果,不改變路由

2021-10-07 06:45:11 字數 451 閱讀 4357

react實現錨點滾動,我個人用在填寫過長form表單資訊時,提交有未填寫項,則自動滾動到對應資訊位置。

使用scrollintoview,h5新增api:

效果:

**如下:

//滾動到指定錨點 

scrolltoanchor = (anchorname: any) =>

if (anchorname)

}}

render() }>

跳到'命名'位置

}>

跳到'地域'位置);}

a標籤可以換成其他任意標籤

可傳引數:

jQuery實現頁面錨點滾動效果

核心 html,body animate 1500 讓滾動條在指定時間內,滾動到指定元素的位置。scrolltop 相對滾動條頂部的偏移 offset獲取元素偏移量.top表示獲取元素距離頂端的位置,left表示獲取元素距離左側的位置 第一章第二章 第三章第一章 第一章節內容 第一章節內容 第一章節...

js跳轉到錨點 jQuery動畫滾動到錨點)

a name bottom a 正常網頁的跳轉用跳轉到錨點,不同頁面前面加上頁面路徑即可如跳轉到錨點,location.hash bottom location.href url2.htm bottom 不只有a,其他元素也可以,比如在 中 tr id tr1 tr location.hash tr...

Vue使用原生JS實現錨點跳轉滾動效果

本文使用iview 左側導航元素 測試 右側滾動元素 史蒂夫 賈伯斯 斯蒂夫 蓋瑞 沃茲尼亞克 斯蒂夫 蓋瑞 沃茲尼亞克 stephen gary wozniak 美國電腦工程師,曾與史蒂夫 賈伯斯合夥創立蘋果電腦 今之蘋果公司 斯蒂夫 蓋瑞 沃茲尼亞克曾就讀於美國科羅拉多大學,後轉學入美國著名高等...