原生JS點選滾動到指定位置

2021-09-24 09:08:50 字數 1418 閱讀 1144

需求解析:我們要滾動到指定位置,首先要知道要位置距離頂部的距離,這個可以自己去量取。當我們知道這個距離的時候就很容易實現了,在我們實現之前先要知道不同瀏覽器如何去寫才能改變滾動條的位置,看**:

document.documentelement.scrolltop //ie瀏覽器

window.pageyoffset //safari瀏覽器

document.body.scrolltop //opera,firefox

此時想要滾動到指定位置就只需要賦值給它就行了。但是這樣的效果並不友好,所以我們可以加個setinterval來讓整個過程更友好一點,看**:

let timer = setinterval(() => 

}, 20); //記得要做瀏覽器相容,我只寫乙個

這裡是每20毫秒document.documentelement.scrolltop += a,當document.documentelement.scrolltop === b時清除定時器。到這裡我們算是友好的實現了如何滾動到指定位置。

但是在實際使用中就會發現問題,document.documentelement.scrolltop += a 實際上是在已滾動的基礎上在加上這麼多,會造成最終滾動的距離是想要滾動的距離加上了已經滾動的距離(自我感覺這個地方是有問題但是我又想不出來問題出在哪,大家如果在使用過程中發現了這個問題請麻煩告知我,我及時改正,抱歉)。

所以在實際運用中我們需要找乙個參照點來有效的無誤的實現這個滾動,看**:

let btn = document.getelementbyid('btn'); 

let x = btn.offsettop ;

這裡是獲取到了id = btn元素距離頂部的距離,如果要滾動到這個位置就只需要把這個值賦值個document.documentelement.scrolltop,如果像我一樣要滾動到地方沒有元素,就找乙個已有元素做參照,例如滾動的距離btn下方的1000px處就只需let x = btn.offsettop + 1000;即可,我寫的方法如下:

function upload() 

let timer = setinterval(() =>

}, 20);

let timer_1 = setinterval(() =>

}, 20);

let timer_2 = setinterval(() =>

}, 20);

}

希望以上內容對你有所幫助,上述內容中有任何錯誤之處希望在您檢視之時能夠之處,小菜及時改正,謝謝。

js滾動到指定位置

向上的滾動距離,或者說滾動出可視區域的距離 獲得滾動的畫素數 var intelemscrolltop someelement.scrolltop 設定滾動的距離 element.scrolltop intvalue scrolltop賦值為負數的時候,scrolltop賦值為0 如果乙個元素不能滾...

jQuery滾動到頁面指定位置

在前端的頁面開發中,經常會碰到頁面跳轉問題,這個跳轉指的是頁面內部跳轉到指定位置,通常是在有滾動條的情況下,網上介紹的方法很多,本文主要是介紹jquery函式中的乙個小trick,focus 函式。先來看一下jquery的官方文件 上面的文件扯了一堆,半點沒看到頁面跳轉的影子,但是在實際應用中你會發...

RecyclerView滾動到指定位置的一種姿勢。

其實這個問題沒有什麼難度了,下面的兩種方式都可以實現,但是效果可能並不是我想要的。recyclerview.scrolltoposition position recyclerview.smoothscrolltoposition position 因為我的效果是想要指定的position滑動到視窗...