JS back to the top of

Recently in the MU-net to see a case tutorial-back to the top effect (native JS implementation)

<a href= "javascript:;" id= "btn" title= "Back to Top" ></a>

This a tag is used to implement the link back to the top, where href= "javascript:;" is used to block the default behavior of the a tag, because we are going to trigger the Click event to get the scroll bar back to the top instead of the jump page. Of course, if you set it to href= "", it will also jump to the top of the page by default, but the user experience is poor, and we mostly want to implement an easing effect. OK, here's a tag to set its style:

#btn {width:40px; height:40px; position:fixed; right:25px; bottom:10px; display:none; Background:url (images/top_ Bg.png) no-repeat left top;} #btn: hover {background:url (images/top_bg.png) no-repeat 0-39px;}

Here, the a tag is fixed by position:fixed in the lower right corner of the page, where it can be fine-tuned with the bottom. Set a background image for the A tag, which is the image above. The default is to display the upper half of the image, which is x 40, where the background position can be set directly to the left top due to the size of the image (x 80). And the default is to hide the a tag, when we scroll the page, if the scrolling height is greater than the visible area of our computer and then the a tag display, this is mainly with JS implementation, the following will say! A label suspension effect, in fact, is very simple, as long as the background image of the location of a change on the line, specific reference to the above CSS code!

Now back to the top button style has, Next is the JS implementation when clicking on the button to ease back to the top of the effect, the code is as follows:

Window.onload = function () {var obtn = document.getElementById (' btn ');   Gets the ID of the top button back to var clientheight = Document.documentElement.clientHeight; Gets the height of the viewable area var timer = null; Define a timer var istop = true; Defines a Boolean value that is used to determine whether to reach the top Window.onscroll = function () {//scroll bar Scroll Event//Get scroll height of the scrollbar var ostop = document.do Cumentelement.scrolltop | |         Document.body.scrollTop;        if (ostop >= clientheight) {//If the scrolling height is greater than the visible area height, the back top button Obtn.style.display = ' block ' is displayed;        }else{//otherwise hidden Obtn.style.display = ' none ';        }//is mainly used to determine when the scroll bar is clicked back to the top button, and if the scroll bar is manually scrolled during the rollback, the timer if (!istop) {clearinterval (timer) is cleared;    } Istop = false; } Obtn.onclick = function () {//Return top button click event//Set a timer timer = setinterval (function () {//Get scroll bar The rolling height of var ostop = Document.documentElement.scrollTop | |            Document.body.scrollTop; Used to set the effect of poor speed, resulting in ease of movement var = math.floor (-ostop/6);            Document.documentElement.scrollTop = Document.body.scrollTop = Ostop + speed;  Istop =true;            Used to block the scrolling event purge timer if (ostop = = 0) {clearinterval (timer);    }},30); }}

So to this, our back to the top effect can be achieved, you can get a browser test. In fact, back to the top of the implementation of the effect of many, here is just a solution for reference!

JS back to the top of