在做js返回頂部的效果時(shí)，要監(jiān)聽(tīng)網(wǎng)頁(yè)滾動(dòng)條滾動(dòng)事件，這個(gè)事件就是：window.onscroll。當(dāng)onscroll事件發(fā)生時(shí)，用js獲得頁(yè)面的scrollTop值，判斷scrollTop為一個(gè)設(shè)定值時(shí)，顯示“返回面部”

js網(wǎng)頁(yè)滾動(dòng)條滾動(dòng)事件

<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 />以便頁(yè)面出現(xiàn)滾動(dòng)條，限于篇幅本文此處略去 
</div>

例子語(yǔ)法解釋

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

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

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

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

javascript事件與功能說(shuō)明大全：

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

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

您可能感興趣的文章:

相關(guān)文章

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