錨鏈接
使用錨鏈接方式實(shí)現(xiàn)回到頂部效果,是最簡(jiǎn)便的一種方式,即將標(biāo)簽a中的href屬性值設(shè)置為#即可:<a href="#" ></a>,便可實(shí)現(xiàn)一鍵回到頂部效果.為了提供較好的用戶體驗(yàn),這里使用js實(shí)現(xiàn)這個(gè)功能.
功能點(diǎn)
- 返回頂部的過程是一個(gè)由快到慢的滾動(dòng)過程;
- 在返回頂部的滾動(dòng)過程中鸣驱，如果滾動(dòng)鼠標(biāo)滾輪，可暫停在當(dāng)前位置杏死。
- 滾動(dòng)條距離頂部較遠(yuǎn)時(shí),顯示返回頂部按鈕,較近時(shí)不顯示;
主要知識(shí)點(diǎn)
- DOM操作
- document.getElementById
-根據(jù)ID獲取標(biāo)簽元素var obtn=document.getElementById('btn'); - 獲取瀏覽器距離頂部的高度塞帐，注意在chrom和IE等瀏覽器的兼容性
-document.documentElement.scrollTop 滾動(dòng)條到頂端的距離顶猜，可以讀寫（適用 IE 類瀏覽器）
-document.body.scrollTop 滾動(dòng)條到頂端的距離塘娶，可以讀寫（適用 chrome 類瀏覽器）
- 事件運(yùn)用
- window.onload 頁(yè)面加載完畢后觸發(fā)
- onclick 點(diǎn)擊后觸發(fā)
- window.onscroll 滾動(dòng)條滾動(dòng)時(shí)觸發(fā)
- 定時(shí)器
- setInterval() 設(shè)置定時(shí)器扰法，需傳入兩個(gè)參數(shù)：第一個(gè)是重復(fù)執(zhí)行的函數(shù)栓票，第二個(gè)是函數(shù)重復(fù)執(zhí)行的時(shí)間間隔
- clearInterval() 關(guān)閉定時(shí)器，需傳入一個(gè)參數(shù)：定時(shí)器對(duì)象
代碼
首先獲取元素標(biāo)簽颜启，并對(duì)其綁定點(diǎn)擊事件：獲取滾動(dòng)條距離頂部的高度并進(jìn)行賦值操作偷俭。這樣可實(shí)現(xiàn)每點(diǎn)擊一次滾動(dòng)條向上滾動(dòng)200的距離，需要不斷觸發(fā)點(diǎn)擊事件直到滾動(dòng)條回到頂部為止缰盏。
var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
//osTop=200;
document.documentElement.scrollTop=document.body.scrollTop-=200;
使用setInterval()函數(shù)涌萤，每隔一段時(shí)間執(zhí)行一次賦值操作。并當(dāng)滾動(dòng)條距離頂部的高度值osTop為0時(shí)口猜，清除定時(shí)器负溪。
為了實(shí)現(xiàn)滾動(dòng)條向上滾動(dòng)的過程是一個(gè)由快到慢的過程，執(zhí)行下面的運(yùn)算济炎。ispeed的絕對(duì)值越大川抡、滾動(dòng)條距離頂部的高度值就越小，即回到頂部的速度就越快冻辩；ispeed的絕對(duì)值越小猖腕，返回頂部的速度就相對(duì)較小。
在這里使用Math.floor()向下取整恨闪，當(dāng)osTop / 5介于0~1之間時(shí)倘感，ispeed的值舍為0。這樣的話chrome瀏覽器中滾動(dòng)條距離頂部的高度值 document.body.scrollTop= osTop-0咙咽，這樣滾動(dòng)條的距離頂部的高度會(huì)一直為某個(gè)數(shù)字老玛。導(dǎo)致滾動(dòng)條到頂部的距離永遠(yuǎn)不會(huì)為0，這樣滾動(dòng)條看似在頂部位置停止钧敞，實(shí)際上鼠標(biāo)下拉滾動(dòng)條時(shí)發(fā)現(xiàn)滾動(dòng)條依然會(huì)向上滾動(dòng)蜡豹，說明定時(shí)器一直在執(zhí)行。
var ispeed=Math.floor(osTop / 5);
document.documentElement.scrollTop=document.body.scrollTop = osTop-ispeed;
// console.log(osTop-ispeed);
然鵝溉苛，用Math.ceil()向上取整镜廉，可保證ispeed的值不會(huì)為0；或者依然使用Math.floor()將值改為負(fù)值Math.floor(-osTop / 5)是一樣的道理愚战。代碼如下：
var timer = null;
obtn.onclick=function(){
//設(shè)置定時(shí)器
timer=setInterval(function(){
//獲取滾動(dòng)條距離頂部的高度
var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
var ispeed=Math.floor(-osTop / 5);
isTop = true;
document.documentElement.scrollTop=document.body.scrollTop = osTop+ispeed;
if(osTop==0){
clearInterval(timer);
}
},30);
}
這樣就實(shí)現(xiàn)了點(diǎn)擊返回頂部按鈕娇唯，頁(yè)面返回頂部的速度隨著滾動(dòng)條到頂部距離的減小而變慢，即實(shí)現(xiàn)了一個(gè)速度由快到慢的過程寂玲。
window是一個(gè)窗口類塔插，onscroll是窗口類window的對(duì)象,滾動(dòng)滾動(dòng)條時(shí)觸發(fā)。
這里window.onscroll事件的目的拓哟，就是在使用鼠標(biāo)的滾動(dòng)按鈕滾動(dòng)頁(yè)面時(shí)停止setInterval.用的方法是添加一個(gè)isTop.由于頁(yè)面是一點(diǎn)一點(diǎn)滾動(dòng)的想许，函數(shù)會(huì)被執(zhí)行多次。鼠標(biāo)滾動(dòng)断序，觸發(fā)window.onscroll,執(zhí)行完里面的函數(shù)后才執(zhí)行setInterval流纹，但是在執(zhí)行window.onscroll事件第二次的時(shí)候!isTop=true,清楚定時(shí)器，這個(gè)時(shí)候就不再往上滾動(dòng)了违诗。
var isTop = true;
var clientHeight = document.documentElement.clientHeight;//獲取頁(yè)面可視區(qū)高度
window.onscroll=function(){
//alert(clientHeight);
//滾動(dòng)條滾動(dòng)觸發(fā)
if(!isTop)//條件為真時(shí)執(zhí)行清除定時(shí)器操作
clearInterval(timer);
isTop = false;
}
實(shí)現(xiàn)了滾動(dòng)暫停捧颅，另外再在window.onscroll事件中使用腳本控制“回到頂部”按鈕的顯示與隱藏
var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
if(osTop >= clientHeight){
obtn.style.display = 'block';
}else{
obtn.style.display = 'none';
}
問題:
var osTop = document.documentElement.scrollTop為什么不能做全局變量
1、盡量不要使用全局變量较雕。每聲明一個(gè)全局變量會(huì)占用一點(diǎn)內(nèi)存碉哑，另外會(huì)造成變量名污染；
2亮蒋、var osTop = document.documentElement.scrollTop扣典。如果寫在外面，osTop只是在JS文件載入時(shí)獲取滾動(dòng)條距離頂部的高度慎玖，但有的時(shí)候贮尖，如頁(yè)面在滾動(dòng)的時(shí)候osTop的值是在不斷變化的，所以我們要在綁定scroll事件中不斷的去獲取osTop的值.
