三款返回頁(yè)面頂部代碼
編輯
分享
評(píng)論
贊0
本文介紹三款簡(jiǎn)單的返回頁(yè)面頂部代碼，可以使用簡(jiǎn)單的HTML錨標(biāo)記，也可使用Javascript Scroll函數(shù)動(dòng)態(tài)返回，其它的還有懸浮腳本等有點(diǎn)復(fù)雜了，本文不再介紹，大家根據(jù)自己需要選擇其中的一種即可，總之簡(jiǎn)約最美的，能減少代碼就減少代碼，能不調(diào)用的就別調(diào)用，要不是天緣博客的文章都是牛長(zhǎng)也不會(huì)添加這個(gè)功能。
一、使用錨標(biāo)記返回頁(yè)面頂部
使用HTML錨標(biāo)記最簡(jiǎn)單，就是看起來(lái)有點(diǎn)不好看，點(diǎn)擊后會(huì)在地址欄顯示這個(gè)錨標(biāo)記，其它的倒沒(méi)什么。
頁(yè)面頂部放置：
<a name="top" id="top"></a>
放置位置在<body>標(biāo)簽之后隨便找個(gè)地方放都可以，只要靠近頂部即可。
頁(yè)面底部放置：
<a href="#top" target="_self">返回頂部</a>
二、使用Javascript Scroll函數(shù)返回頂部
scrooll函數(shù)用來(lái)控制滾動(dòng)條的位置，有兩種很簡(jiǎn)單的實(shí)現(xiàn)方式：
方式1：
<a href="javascript:scroll(0,0)">返回頂部</a>
scroll第一個(gè)參數(shù)是水平位置，第二個(gè)參數(shù)是垂直位置，比如要想定位在垂直50像素處，改成scroll(0,50)就可以了。
方式2：
本方式是漸進(jìn)式返回頂部，要好看一些，代碼如下：
function pageScroll() {
window.scrollBy(0,-10);
scrolldelay = setTimeout('pageScroll()',100);
}
<a href="pageScroll();">返回頂部</a>
這樣就會(huì)動(dòng)態(tài)返回頂部，不過(guò)雖然返回到頂部但是代碼仍在運(yùn)行，還需要在pageScroll函數(shù)加一句給停止掉。
if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay);
三、使用Onload加上scroll功能實(shí)現(xiàn)動(dòng)態(tài)返回頂部
1、首先在網(wǎng)頁(yè)BODY標(biāo)簽結(jié)束之前加上：
<div id="gotop">返回頂部</div>
2、再調(diào)用以下JS腳本部分（本腳本非天緣原創(chuàng)，早前來(lái)源于Z-BLOG官方論壇上收集，源包未帶作者鏈接，如果原作者看到敬請(qǐng)留言添加）：
BackTop=function(btnId){
var btn=document.getElementById(btnId);
var d=document.documentElement;
window.onscroll=set;
btn.onclick=function (){
btn.style.display="none";
window.onscroll=null;
this.timer=setInterval(function(){
d.scrollTop-=Math.ceil(d.scrollTop*0.1);
if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);
},10);
};
function set(){btn.style.display=d.scrollTop?'block':"none"}
};
BackTop('gotop');
對(duì)Z-BLOG而言，可以放到$(document).ready(function(){....函數(shù)中，也可以獨(dú)立存成一個(gè)js文件，比如gotop.js，再通過(guò)：
<SCRIPT src="/js/gotop.js" type=text/javascript></SCRIPT>
來(lái)調(diào)用，當(dāng)然了位置最好放在“返回頂部”標(biāo)簽的下面，該調(diào)用方法已假設(shè)路徑為JS，其它位置請(qǐng)自行修改。
補(bǔ)充：
上述返回頂部代碼都是文字式樣的，也可以把文字更換為漂亮一點(diǎn)的圖標(biāo)，另外還有懸浮狀的返回頂部代碼（就是頁(yè)面滾動(dòng)時(shí)，返回頂部圖標(biāo)也會(huì)跟著跑的那種），需要使用到層等，搞的有點(diǎn)復(fù)雜了，本文暫不列出。
猜你喜歡