快捷導(dǎo)航

javascript返回頂部效果(自寫代碼)

更新時(shí)間：2013年01月06日 11:09:53 作者：

今天抽空用原生javascript寫了個(gè)返回頂部效果，由于本人水平有限，如有問(wèn)題請(qǐng)指出,在下很樂(lè)意接受，有需要的朋友可以參考下

現(xiàn)在很多網(wǎng)站都用到了返回頂部的效果，當(dāng)然懶的話也可以直接 a 鏈接鏈到 #，這樣也可以達(dá)到效果。今天抽空用原生 javascript 寫了個(gè)，由于本人水平有限，如有問(wèn)題請(qǐng)指出。
html 代碼：

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

 
<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>js-回到頂部</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.wrapper{width:960px;margin-left:auto;margin-right:auto;} 
p{margin:10px;line-height:30px;} 
#top{position:fixed;right:130px;bottom:50px;background:gray;padding:5px;display:block;} 
</style> 
</head> 
<body> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器?！坝浭卤尽弊畛Ｓ脕?lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器?！坝浭卤尽弊畛Ｓ脕?lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器?！坝浭卤尽弊畛Ｓ脕?lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器?！坝浭卤尽弊畛Ｓ脕?lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器。“記事本”最常用來(lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器?！坝浭卤尽弊畛Ｓ脕?lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器?！坝浭卤尽弊畛Ｓ脕?lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器?！坝浭卤尽弊畛Ｓ脕?lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器?！坝浭卤尽弊畛Ｓ脕?lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器。“記事本”最常用來(lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器?！坝浭卤尽弊畛Ｓ脕?lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<p>“記事本”是一個(gè)用來(lái)創(chuàng)建簡(jiǎn)單的文檔的基本的文本編輯器?！坝浭卤尽弊畛Ｓ脕?lái)查看或編輯文本 (.txt) 文件，但是許多用戶發(fā)現(xiàn)“記事本”是創(chuàng)建網(wǎng)頁(yè)的簡(jiǎn)單工具。</p> 
<p>因?yàn)椤坝浭卤尽眱H支持很基本的格式，所以您不能在需要保持純文本的文檔中偶爾保存特殊格式。因?yàn)樘厥庾址蚱渌袷讲荒茉谒l(fā)布的網(wǎng)頁(yè)上顯示，否則可能導(dǎo)致錯(cuò)誤，所以，在為網(wǎng)頁(yè)創(chuàng)建 HTML 文檔時(shí)它特別有用。</p> 
<p>可以將記事本文件保存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當(dāng)使用不同字符集的文檔時(shí)，這些格式可以向您提供更大的靈活性。</p> 
<a href="javascript:;" id="top">回到頂部</a> 
</body> 
</html> 
<script type="text/javascript" src="js/toTop.js"></script> 
<script type="text/javascript"> 
window.onload = function(){ 
toTop('top',false); 
} 
</script> 

toTop.js 代碼：

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

 
//第一個(gè)參數(shù)是按鈕id；第二個(gè)參數(shù)是一個(gè)布爾值，true是一直顯示按鈕，false是當(dāng)滾動(dòng)距離不為0時(shí)，顯示按鈕 
function toTop(id,show){ 
var oTop = document.getElementById(id); 
var bShow = show; 
if(!bShow){ 
oTop.style.display = 'none'; 
setTimeout(btnShow,50); 
} 
oTop.onclick = scrollToTop; 
function scrollToTop(){ 
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
var iSpeed = Math.floor(-scrollTop/2); 
if(scrollTop <= 0){ 
if(!bShow){ 
oTop.style.display = 'none'; 
} 
return; 
} 
document.documentElement.scrollTop = document.body.scrollTop = scrollTop + iSpeed; 
setTimeout(arguments.callee,50); 
} 
function btnShow(){ 
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
if(scrollTop <= 0 ){ 
oTop.style.display = 'none'; 
}else{ 
oTop.style.display = 'block'; 
} 
setTimeout(arguments.callee,50); 
} 
} 

注意：
ie6 下 position:fixed 無(wú)效，具體兼容請(qǐng)點(diǎn)擊瀏覽器的各種bug。另外以前寫過(guò)一篇css解決ie6下position:fixed失效，并不支持該效果。
PS：這是本人閑著無(wú)聊，通過(guò)自己所學(xué)的 javascript 知識(shí)，隨意寫的一些效果。

第二種方法：
很多網(wǎng)頁(yè)在下方都會(huì)放置一個(gè)“返回頂部”按鈕，尤其是頁(yè)面底部沒(méi)有導(dǎo)航的網(wǎng)頁(yè)，這樣可以幫助訪客重新找到導(dǎo)航或者重溫一遍廣告（想得真美）。隨著近幾年來(lái) JavaScript 的應(yīng)用日漸廣泛，滑動(dòng)效果無(wú)處不在，于是我也跟跟風(fēng)，將返回頂部功能做成了滑動(dòng)效果。后來(lái)為了更貼合物理特征，改造做成了減速的滑動(dòng)效果。

首先說(shuō)一下原理吧，我們會(huì)獲取滾動(dòng)條到頁(yè)面頂部的距離，然后上移一定的距離；再獲取滾動(dòng)條到頁(yè)面頂部的距離，上移一定的距離（比上一次小一點(diǎn)）;以此類推 ...
先上代碼吧：

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

 
<script type="text/javascript"> 
/** 
* 回到頁(yè)面頂部 
* @param acceleration 加速度 
* @param time 時(shí)間間隔 (毫秒) 
**/ 
function goTop(acceleration, time) { 
acceleration = acceleration || 0.1; 
time = time || 16; 
var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 0; 
var x3 = 0; 
var y3 = 0; 
if (document.documentElement) { 
x1 = document.documentElement.scrollLeft || 0; 
y1 = document.documentElement.scrollTop || 0; 
} 
if (document.body) { 
x2 = document.body.scrollLeft || 0; 
y2 = document.body.scrollTop || 0; 
} 
var x3 = window.scrollX || 0; 
var y3 = window.scrollY || 0; 
// 滾動(dòng)條到頁(yè)面頂部的水平距離 
var x = Math.max(x1, Math.max(x2, x3)); 
// 滾動(dòng)條到頁(yè)面頂部的垂直距離 
var y = Math.max(y1, Math.max(y2, y3)); 
// 滾動(dòng)距離 = 目前距離 / 速度, 因?yàn)榫嚯x原來(lái)越小, 速度是大于 1 的數(shù), 所以滾動(dòng)距離會(huì)越來(lái)越小 
var speed = 1 + acceleration; 
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); 
// 如果距離不為零, 繼續(xù)調(diào)用迭代本函數(shù) 
if(x > 0 || y > 0) { 
var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; 
window.setTimeout(invokeFunction, time); 
} 
} 
</script> 