快捷導(dǎo)航

js網(wǎng)頁(yè)滾動(dòng)條滾動(dòng)事件實(shí)例分析

更新時(shí)間：2015年05月05日 16:03:11 作者：yongtaiyu

這篇文章主要介紹了js網(wǎng)頁(yè)滾動(dòng)條滾動(dòng)事件的用法,實(shí)例分析了javascript中window.onscroll監(jiān)控滾動(dòng)條滾動(dòng)事件的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了js網(wǎng)頁(yè)滾動(dòng)條滾動(dòng)事件用法。分享給大家供大家參考。具體分析如下：

在做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 類(lèi)型，在 IE 中才能利用 document.documentElement 來(lái)取得窗口的寬度及高度

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

Javascript獲取CSS偽元素屬性的實(shí)現(xiàn)代碼
這篇文章主要介紹了Javascript獲取CSS偽元素屬性的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2014-09-09
在微信小程序中使用mqtt服務(wù)的方法
這篇文章主要介紹了在微信小程序中使用mqtt服務(wù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
詳解小程序原生使用ES7 async/await語(yǔ)法
這篇文章主要介紹了詳解小程序原生使用ES7 async/await語(yǔ)法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
運(yùn)用Windows XP附帶的Msicuu.exe、Msizap.exe來(lái)徹底卸載頑固程序
運(yùn)用Windows XP附帶的Msicuu.exe、Msizap.exe來(lái)徹底卸載頑固程序...
2007-04-04
ES6 Class中實(shí)現(xiàn)私有屬性的一些方法總結(jié)
這篇文章主要給大家介紹了關(guān)于ES6 Class中實(shí)現(xiàn)私有屬性的一些方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
Markdown與Bootstrap相結(jié)合實(shí)現(xiàn)圖片自適應(yīng)屬性
Markdown 是一種輕量級(jí)的標(biāo)記語(yǔ)言，它的優(yōu)點(diǎn)很多，目前也被越來(lái)越多的寫(xiě)作愛(ài)好者，撰稿者廣泛使用。接下來(lái)通過(guò)本文給大家介紹Markdown與Bootstrap相結(jié)合實(shí)現(xiàn)圖片自適應(yīng)屬性，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
js的回調(diào)函數(shù)詳解
本文主要介紹了個(gè)人對(duì)于javascript中回調(diào)函數(shù)的理解和使用方法及示例,需要的朋友可以參考下
2015-01-01
TypeScript泛型的使用詳細(xì)介紹
在TypeScript中,泛型是一種創(chuàng)建可復(fù)用代碼組件的工具。這種組件不只能被一種類(lèi)型使用,而是能被多種類(lèi)型復(fù)用。類(lèi)似于參數(shù)的作用,泛型是一種用以增強(qiáng)類(lèi)(classes)、類(lèi)型(types)和接口(interfaces)能力的非?？煽康氖侄?/div> 2022-09-09
JavaScript驗(yàn)證圖片類(lèi)型(擴(kuò)展名)的函數(shù)分享
這篇文章主要介紹了JavaScript驗(yàn)證圖片類(lèi)型的函數(shù)分享,需要的朋友可以參考下
2014-05-05
javascript parseInt() 函數(shù)的進(jìn)制轉(zhuǎn)換注意細(xì)節(jié)
parseInt(string, radix) 有2個(gè)參數(shù)，第一個(gè)string 是傳入的數(shù)值，第二個(gè)radix是傳入數(shù)值的進(jìn)制，參數(shù)radix 可以忽略，默認(rèn)為 10，各種進(jìn)制的數(shù)轉(zhuǎn)換為十進(jìn)制整數(shù),接下來(lái)詳細(xì)介紹，感興趣的朋友可以了解下哦
2013-01-01