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

2021-10-10 10:16:16 字數 1367 閱讀 4251

本文使用iview 

// 左側導航元素

測試

// 右側滾動元素

史蒂夫·賈伯斯}

斯蒂夫·蓋瑞·沃茲尼亞克

斯蒂夫·蓋瑞·沃茲尼亞克(stephen gary

wozniak),美國電腦工程師,曾與史蒂夫·賈伯斯合夥創立蘋果電腦(今之蘋果公司)。斯蒂夫·蓋瑞·沃茲尼亞克曾就讀於美國科羅拉多大學,後轉學入美國著名高等學府加州大學伯克利分校(uc

berkeley)並獲得電機工程及計算機(eecs)本科學位(2023年)。

喬納森·伊夫

// js部分

gotoanchor(index));

},

用到的方法:

scrollintoview

el.scrollintoview(); // 等同於el.scrollintoview(true)

el.scrollintoview(false);

如果為true,表示元素的頂部與當前區域的可見部分的頂部對齊(前提是當前區域可滾動);

如果為false,表示元素的底部與當前區域的可見部分的尾部對齊(前提是當前區域可滾動)。

如果沒有提供該引數,預設為true。

//這個title-part元素將以平滑的滾動方式滾動到與視口底部齊平地方(有相容性問題)

document.queryselector("#title-part").scrollintoview()

//這個article-part元素將以平滑的滾動方式滾動到與視口頂部齊平地方(有相容性問題)

document.queryselector("#article-part").scrollintoview()

//這個articlemu-part元素將木訥的瞬間滾動到與視口頂部齊平地方(無滾動動畫效果)

document.queryselector("#articlemu-part").scrollintoview();//預設值就是true,可以不寫

//這個titlemu-part元素將木訥的瞬間滾動到與視口底部齊平地方(無滾動動畫效果)

document.queryselector("#titlemu-part").scrollintoview(false)

// 注意 頁面一定要能滾動,這個方法才會生效,否則,你讓我如何給你滾動呢?

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

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

Vue 錨點跳轉雙向繫結監聽滾動

最近碰到乙個常見的需求,今天來整理一下思路 點選錨點 頁面滾動到指定位置,這個很常見 當需要滾動頁面的時候 點選欄 選單欄 同步展示高亮 這個怎麼完成呢?話不多說 貼 1.這是頭部點選跳轉部分 template div class privilege head ul li class click p...

vue中實現錨點跳轉及滾動監聽的簡便方法

注意 如果scroll item的最後乙個元素高度必須大於等於滾動區域的高度,不然最後乙個元素就滾動不上去,scrollintoview介面的具體引數說明 html結構 list for item,index in title list key index spans style click jum...