JS返回頁面頂部代碼.doc

JS返回頁面頂部代碼.doc

ID:51690610

大小:37.95 KB

頁數(shù):2頁

時間:2020-03-15

JS返回頁面頂部代碼.doc_第1頁
JS返回頁面頂部代碼.doc_第2頁
資源描述:

《JS返回頁面頂部代碼.doc》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫

1、三款簡單的JS返回頁面頂部代碼本文介紹三款簡單的返回頁面頂部代碼,可以使用簡單的HTML錨標(biāo)記,也可使用JavascriptScroll函數(shù)動態(tài)返回,其它的還有懸浮腳本等有點復(fù)雜了,本文不再介紹,大家根據(jù)自己需要選擇其中的一種即可,總之簡約最美的,能減少代碼就減少代碼,能不調(diào)用的就別調(diào)用,要不是天緣博客的文章都是牛長也不會添加這個功能。一、使用錨標(biāo)記返回頁面頂部使用HTML錨標(biāo)記最簡單,就是看起來有點不好看,點擊后會在地址欄顯示這個錨標(biāo)記,其它的倒沒什么。頁面頂部放置:

2、a>放置位置在標(biāo)簽之后隨便找個地方放都可以,只要靠近頂部即可。頁面底部放置:返回頂部二、使用JavascriptScroll函數(shù)返回頂部scrooll函數(shù)用來控制滾動條的位置,有兩種很簡單的實現(xiàn)方式:方式1:viewsourceprint?1返回頂部scroll第一個參數(shù)是水平位置,第二個參數(shù)是垂直位置,比如要想定位在垂直50像素處,改成scroll(0,50)就可以了

3、。方式2:本方式是漸進式返回頂部,要好看一些,代碼如下:viewsourceprint?1functionpageScroll(){2window.scrollBy(0,-10);3scrolldelay=setTimeout('pageScroll()',100);4}56返回頂部這樣就會動態(tài)返回頂部,不過雖然返回到頂部但是代碼仍在運行,還需要在pageScroll函數(shù)加一句給停止掉。viewsourceprint?1if(document.documentE

4、lement.scrollTop==0)clearTimeout(scrolldelay);三、使用Onload加上scroll功能實現(xiàn)動態(tài)返回頂部1、首先在網(wǎng)頁BODY標(biāo)簽結(jié)束之前加上:返回頂部

2、再調(diào)用以下JS腳本部分(本腳本非天緣原創(chuàng),早前來源于Z-BLOG官方論壇上收集,源包未帶作者鏈接,如果原作者看到敬請留言添加):viewsourceprint?01BackTop=function(btnId){02varbtn=document.getElementById(

5、btnId);03vard=document.documentElement;04window.onscroll=set;05btn.onclick=function(){06btn.style.display="none";07window.onscroll=null;08this.timer=setInterval(function(){09d.scrollTop-=Math.ceil(d.scrollTop*0.1);10if(d.scrollTop==0)clearInterval(btn.timer,wi

6、ndow.onscroll=set);11},10);12};13functionset(){btn.style.display=d.scrollTop?'block':"none"}14};15BackTop('gotop');對Z-BLOG而言,可以放到$(document).ready(function(){....函數(shù)中,也可以獨立存成一個js文件,比如gotop.js,再通過:來調(diào)用,當(dāng)然了位置最

7、好放在“返回頂部”標(biāo)簽的下面,該調(diào)用方法已假設(shè)路徑為JS,其它位置請自行修改。補充:上述返回頂部代碼都是文字式樣的,也可以把文字更換為漂亮一點的圖標(biāo),另外還有懸浮狀的返回頂部代碼(就是頁面滾動時,返回頂部圖標(biāo)也會跟著跑的那種),需要使用到層等,搞的有點復(fù)雜了,本文暫不列出。

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動畫的文件,查看預(yù)覽時可能會顯示錯亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
3. 下載前請仔細閱讀文檔內(nèi)容,確認文檔內(nèi)容符合您的需求后進行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤,付費完成后未能成功下載的用戶請聯(lián)系客服處理。
相關(guān)標(biāo)簽