點選按鈕,回到頁面頂部的5種寫法

2022-08-26 08:39:08 字數 790 閱讀 2721

1.錨點方式:

回到頂部

2.scrolltop:scrolltop屬性表示被隱藏在內容區域上方的畫素數。元素未滾動時,scrolltop的值為0,如果元素被垂直滾動了,scrolltop的值大於0,且表示元素上方不可見內容的畫素寬度

由於scrolltop是可寫的,可以利用scrolltop來實現回到頂部的功能

1 2 回到頂部

38

3.scrollto:scrollto(x,y)方法滾動當前window中顯示的文件,讓文件中由座標x和y指定的點位於顯示區域的左上角,設定scrollto(0,0)可以實現回到頂部的效果

1 2 回到頂部

38

4.scrollby():scrollby(x,y)方法滾動當前window中顯示的文件,x和y指定滾動的相對量,只要把當前頁面的滾動長度作為引數,逆向滾動,則可以實現回到頂部的效果

1 2 回到頂部

39

5.scrolltoview()element.scrollintoview方法滾動當前元素,進入瀏覽器的可見區域,該方法可以接受乙個布林值作為引數。如果為true,表示元素的頂部與當前區域的可見部分的頂部對齊(前提是當前區域可滾動);如果為false,表示元素的底部與當前區域的可見部分的尾部對齊(前提是當前區域可滾動)。如果沒有提供該引數,預設為true,使用該方法的原理與使用錨點的原理類似,在頁面最上方設定目標元素,當頁面滾動時,目標元素被滾動到頁面區域以外,點選回到頂部按鈕,使目標元素重新回到原來位置,則達到預期效果

回到頂部

jquery回到頁面頂部按鈕

昨天看到乙個園友的blog中有個頁面下滾後出現用於 回到頁面頂部 按鈕的效果,感覺挺不錯的,所以自己也寫了乙個,用jquery寫是再簡單不過了.下面就直接給出 了 1 scroll up 25.scroll up hover 下面是jquery 1 function scrollbtn.defaul...

JS 回到頂部按鈕的實現

很多頁面都有乙個回到頂部的按鈕,一旦點選頁面的scrollbar就會變為0 只需要document.body.scrolltop document.documentelement.scrolltop 0,在這個基礎上在加乙個緩動公式。下面貼上我的 html 1 div class content 2...

點選回到頂部的緩衝動畫

動畫函式 function animate obj,target,callback 呼叫的時候 callback 先清除以前的定時器,只保留當前的乙個定時器執行 clearinterval obj.timer obj.timer setinterval function callback callb...