快捷導(dǎo)航

頁(yè)面回到頂部的三種實(shí)現(xiàn)(錨標(biāo)記，js)

更新時(shí)間：2012年10月01日 19:56:29 作者：

本文不再介紹，大家根據(jù)自己需要選擇其中的一種即可，總之簡(jiǎn)約最美的，能減少代碼就減少代碼，能不調(diào)用的就別調(diào)用，要不是天緣博客的文章都是牛長(zhǎng)也不會(huì)添加這個(gè)功能

本文介紹三款簡(jiǎn)單的返回頁(yè)面頂部代碼，可以使用簡(jiǎn)單的HTML(http://www.dbjr.com.cn/web/62651.html) 錨標(biāo)記，也可使用Javascript Scroll (http://www.dbjr.com.cn/article/31422.htm) 函數(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)式返回頂部，要好看一些，代碼如下：

復(fù)制代碼代碼如下:

 
function pageScroll() { 
window.scrollBy(0,-10); 
scrolldelay = setTimeout('pageScroll()',100); 
} 
<a href="pageScroll();">返回頂部</a> 

這樣就會(huì)動(dòng)態(tài)返回頂部，不過(guò)雖然返回到頂部但是代碼仍在運(yùn)行，還需要在pageScroll函數(shù)加一句給停止掉。

復(fù)制代碼代碼如下:

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)留言添加）：

復(fù)制代碼代碼如下:

 
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ù)雜了，本文暫不列出。

您可能感興趣的文章: