Example analysis of js web page scroll bar Scroll Events

This article describes the js web scroll bar scroll event usage. Share to everybody for everybody reference. The specific analysis is as follows:

To do the js return top effect, listen for the page scroll bar scroll event, which is window.onscroll. When onscroll event occurs, js is used to get the scrollTop value of the page. When scrollTop is judged to be a set value, "Return face" is displayed.

js web page scroll bar scroll events

<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"> At the top of the <a> 
<div id="top_div"><a href="#top"> Return to the top </a></div> 
<br /> 
<br /> 
<div> 
 Here as many as possible <br /> So that the page scroll bar, the length of this article is omitted here  
</div>

Example syntax interpretation

In the style tag, first define top_div css attribute: position:fixed; display: none; Is the key

In the javascript statement, t gets the scroll bar to scroll down, || for better compatibility
Set the top_div css display property to show (inline) and hide (none) when scrolling beyond 300 (pixels)

The DOCTYPE type must be set in IE to use ES42en.documentElement to get the width and height of the window

PS: Here is another online tool about JS events, which summarizes the common event types and functions of JS:

javascript Event and Function Description:

http://tools.ofstack.com/table/javascript_event

I hope this article has been helpful for your javascript programming.