javascript實(shí)現(xiàn)回到頂部特效
更新時(shí)間：2015年05月06日 10:50:12 投稿：hebedich
當(dāng)頁(yè)面特別長(zhǎng)的時(shí)候，用戶想回到頁(yè)面頂部，必須得滾動(dòng)好幾次滾動(dòng)鍵才能回到頂部，如果在頁(yè)面右下角有個(gè)“返回頂部”的按鈕，用戶點(diǎn)擊一下，就可以回到頂部，對(duì)于用戶來(lái)說(shuō)，是一個(gè)比較好的體驗(yà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í)現(xiàn)一個(gè)小程序之99乘法表
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)一個(gè)小程序之99乘法表的相關(guān)資料,需要的朋友可以參考下2017-09-09
async、await是es7里面的新語(yǔ)法，async申明一個(gè)function是異步，而await等待一個(gè)異步方法執(zhí)行完成。替代promise中的then。async函數(shù)返回一個(gè)Promise對(duì)象，當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會(huì)先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。2023-01-01
在線所見(jiàn)即所得HTML編輯器的實(shí)現(xiàn)原理淺析
這篇文章主要介紹了在線所見(jiàn)即所得HTML編輯器的實(shí)現(xiàn)原理淺析,本文用初始化、打開(kāi)編輯功能、獲取編輯器的內(nèi)容、增加樣式設(shè)置、再進(jìn)一步等步驟闡述在線編輯器的基本實(shí)現(xiàn)原理,需要的朋友可以參考下2015-04-04
echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽
項(xiàng)目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網(wǎng)學(xué)習(xí)了一番,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2022-12-12
javaScript中push函數(shù)用法實(shí)例分析
這篇文章主要介紹了javaScript中push函數(shù)用法,較為詳細(xì)的分析了javascript中push函數(shù)的功能、定義及使用技巧,需要的朋友可以參考下2015-06-06
JS實(shí)現(xiàn)的找零張數(shù)最小問(wèn)題示例
這篇文章主要介紹了JS實(shí)現(xiàn)的找零張數(shù)最小問(wèn)題,涉及javascript數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
Javascript 中文字符串處理額外注意事項(xiàng)
javascript文件中的字符常量與所在的js文件字符編碼密切相關(guān)，如下一段代碼2009-11-11
使用戶點(diǎn)擊后退按鈕使效三行代碼...2007-07-07
本文主要分享了js實(shí)現(xiàn)文字選中分享功能的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
JS實(shí)現(xiàn)獲取本月的開(kāi)始時(shí)間與結(jié)束時(shí)間
在JavaScript中,可以使用Date對(duì)象來(lái)獲取本月的開(kāi)始時(shí)間和結(jié)束時(shí)間,本文通過(guò)代碼示例詳細(xì)的給大家介紹了JS獲取本月的開(kāi)始時(shí)間與結(jié)束時(shí)間,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08