<style type="text/css"> 
#top_div{ 
 position:fixed; 
 bottom:80px; 
 right:0; 
 display:none; 
} 
</style> 
<script type="text/javascript"> 
window.onscroll = function(){ 
 var t = document.documentElement.scrollTop || document.body.scrollTop; 
 var top_div = document.getElementById( "top_div" ); 
 if( t >= 300 ) { 
  top_div.style.display = "inline"; 
 } else { 
  top_div.style.display = "none"; 
 } 
} 
</script> 
<a name="top">頂部<a> 
<div id="top_div"><a href="#top">返回頂部</a></div> 
<br /> 
<br /> 
<div> 
這里盡量多些<br />以便頁面出現(xiàn)滾動條，限于篇幅本文此處略去 
</div>

例子語法解釋

在 style 標(biāo)簽中首先定義 top_div css 屬性：position:fixed;display:none; 是關(guān)鍵

javascript 語句中，t 得到滾動條向下滾動的位置，|| 是為了更好兼容性考慮
當(dāng)滾動超過 300 （像素）時，將 top_div css display 屬性設(shè)置為顯示(inline)，反之則隱藏(none)

必須設(shè)定 DOCTYPE 類型，在 IE 中才能利用 document.documentElement 來取得窗口的寬度及高度

PS：這里再為大家提供一個關(guān)于JS事件的在線工具，歸納總結(jié)了JS常用的事件類型與函數(shù)功能：

javascript事件與功能說明大全：

http://tools.jb51.net/table/javascript_event

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

js
滾動條

相關(guān)文章

詳細(xì)教你微信公眾號正文頁SVG交互開發(fā)技巧
這篇文章主要介紹了詳細(xì)教你微信公眾號正文頁SVG交互開發(fā)技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
js經(jīng)驗分享 JavaScript反調(diào)試技巧
在這篇文章中，我打算跟大家總結(jié)一下關(guān)于JavaScript反調(diào)試技巧方面的內(nèi)容。值得一提的是，其中有些方法已經(jīng)被網(wǎng)絡(luò)犯罪分子廣泛應(yīng)用到惡意軟件之中了,需要的朋友可以參考下
2018-03-03
詳解全棧開發(fā)Vercel數(shù)據(jù)庫存儲服務(wù)
這篇文章主要為大家介紹了全棧開發(fā)Vercel數(shù)據(jù)庫存儲服務(wù)功能使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
基于Three.js制作一個3D中國地圖
這篇文章主要為大家介紹一個用Three.js制作的3D中國地圖，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)three.js有一定幫助，感興趣的可以跟隨小編一起試一試
2022-01-01
js使用正則表達(dá)式對身份證號的判斷
這篇文章主要給大家介紹了關(guān)于js使用正則表達(dá)式對身份證號的判斷的相關(guān)資料,在用戶注冊頁面有些需求要求的比較嚴(yán)格,需要對身份證驗證是否合法,通過此功能嚴(yán)格此系統(tǒng)軟件,從而過濾到很多,需要的朋友可以參考下
2023-08-08
解決微信小程序scroll-view組件無橫向滾動的問題
這篇文章主要介紹了微信小程序scroll-view組件無橫向滾動的解決方法,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-02-02
js中函數(shù)的length是多少
本文主要介紹了js中函數(shù)的length是多少，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
[js高手之路]圖解javascript的原型(prototype)對象,原型鏈實例
下面小編就為大家?guī)硪黄猍js高手之路]圖解javascript的原型(prototype)對象,原型鏈實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
JS中==、===你分清楚了嗎
這篇文章主要介紹了JS中==、===你分清楚了嗎,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
JS+CSS實現(xiàn)的拖動分頁效果實例
這篇文章主要介紹了JS+CSS實現(xiàn)的拖動分頁效果,可實現(xiàn)鼠標(biāo)拖動頁面翻轉(zhuǎn)到上一頁或下一頁的功能,涉及javascript操作頁面元素與css樣式的相關(guān)技巧,需要的朋友可以參考下
2015-05-05