javascript實(shí)現(xiàn)回到頂部特效
HTML:
<input id="btn1" type="button" value="回到頂部" />
CSS:
#btn1{position:fixed;bottom:10px;right:10px;}
JS:
window.onload=funcition(){ var oBtn=document.getElementById("btn"); var timer=null; //申明一個(gè)變量看是否為系統(tǒng)還是用戶滾動(dòng) var sBys=true; window.onscroll=funcition(){ if(!sBys){ clearInterval(timer); } sBys=false; } oBtn.onclick=funcition(){ timer = setInterval(funcition(){ //獲取scrollTop var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //當(dāng)點(diǎn)擊按鈕回到頂部時(shí)計(jì)算緩沖速度 var ispeed=Math.floor(-scrollTop/8); if(scrollTop==0){ clearInterval(timer) } sBys=true; document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed; },30) } }
知識(shí)點(diǎn):
1.計(jì)算速度(緩沖)向下取整
2.當(dāng)scrollTop==0時(shí)需要清除定時(shí)器
3.需要判斷是用戶還是js操作滾動(dòng)條,如果是用戶操作就清除定時(shí)器
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
相關(guān)文章
JavaScript設(shè)置表單上傳時(shí)文件個(gè)數(shù)的方法
這篇文章主要介紹了JavaScript設(shè)置表單上傳時(shí)文件個(gè)數(shù)的方法,可實(shí)現(xiàn)動(dòng)態(tài)增加及刪除表單上傳按鈕的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼
手風(fēng)琴效果的下拉菜單大家都有見到過(guò)吧,實(shí)現(xiàn)的方法也有很多,這篇文章就為大家分享了javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼,純手寫的,感興趣的朋友不要錯(cuò)過(guò)。2015-11-11JavaScript中有關(guān)一個(gè)數(shù)組中最大值和最小值及它們的下表的輸出的解決辦法
這篇文章主要介紹了JavaScript中有關(guān)一個(gè)數(shù)組中最大值和最小值及它們的下表的輸出的一種解決辦法,本文還給大家介紹了js快速獲取數(shù)組中最大值和最小值的方法,非常不錯(cuò),需要的朋友可以參考下2016-07-07js 實(shí)現(xiàn)在離開頁(yè)面時(shí)提醒未保存的信息(減少用戶重復(fù)操作)
在離開頁(yè)面時(shí)判斷是否有未保存的輸入值,然后進(jìn)行提醒,接下來(lái)介紹實(shí)現(xiàn)步驟,感興趣的朋友可以了解下2013-01-01Javascript 淺拷貝、深拷貝的實(shí)現(xiàn)代碼
Javascript中的對(duì)像賦值與Java中是一樣的,都為引用傳遞.就是說(shuō),在把一個(gè)對(duì)像賦值給一個(gè)變量時(shí),那么這個(gè)變量所指向的仍就是原來(lái)對(duì)像的地址.那怎么來(lái)做呢 答案是克隆.2008-12-12RGB轉(zhuǎn)換實(shí)現(xiàn)代碼,淘寶前端開發(fā)工程師筆試題
寫一個(gè)轉(zhuǎn)換RGB的值的函數(shù),實(shí)現(xiàn)以下效果。2010-11-11javascript拖曳互換div的位置實(shí)現(xiàn)示例
一個(gè)div拖動(dòng)互換位置的demo,還有很大優(yōu)化的空間,利用dom元素的dragstart/ondragover/ondrop事件完成,感興趣的可以了解一下2021-06-06javascript獲取隱藏dom的寬高 具體實(shí)現(xiàn)
一個(gè)隱藏的DOM是獲取不到寬高的,如果想要獲取,采用下面的方法:2013-07-07