Example analysis of scrolling event for JS Web page

Source: Internet
Author: User

This article describes the JS Web page scroll scrolling event usage. Share to everyone for your reference. The specific analysis is as follows:

In doing JS back to the top of the effect, to listen to the Web page scroll scroll event, this event is: Window.onscroll. When onscroll event occurs, use JS to obtain the ScrollTop value of the page, Judge ScrollTop as a set value, show "Return to Face"

JS Web page scroll bar scrolling Event


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 The 25 26 <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 >=) {top_div.style.display = "inline";} else {top_div.style.display = "none";}} </script> <a name= "Top" > Tops <a> <div id= "Top_div" ><a href= "#top" > Back to Top </a></div > <br/> <br/> <div> here as much as possible <br/> so that the page appears scroll, limited to the text here omitted </div>

Example Grammar explanation

First define the Top_div CSS property in the style label: Position:fixed;display:none; is the key

In a JavaScript statement, T gets the scroll bar to scroll down the position, | | is for better compatibility considerations

When scrolling more than 300 (pixels), set the Top_div CSS display property to display (inline) and vice versa (none)

Must be set DOCTYPE type, in IE to use Document.documentelement to get the width and height of the window

I hope this article will help you with your JavaScript programming.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.