Using native JS to do a simple sliding effect back to the top of _javascript tips

Source: Internet
Author: User

Many pages will have a "back to the Top" button below, especially if there is no navigation at the bottom of the page, which will help visitors to find the navigation or revisit the ad (really beautiful). With the application of JavaScript in recent years more and more extensive, sliding effect everywhere, so I also follow the bandwagon, will return to the top function made a sliding effect. Later, in order to better fit the physical characteristics of the transformation made a deceleration sliding effect.

First of all, we will get the scroll bar to the top of the page distance, and then move up a certain distance, and then get the scroll bar to the top of the page distance, up a certain distance (smaller than the previous one);

<script type= "Text/javascript" >/** * back to top of page * @param acceleration acceleration * @param time interval (milliseconds) **/function go 
Top (acceleration, time) {acceleration = acceleration | | 0.1; Time = Time | | 

var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 0; 
var x3 = 0; 

var y3 = 0; 
if (document.documentelement) {x1 = Document.documentElement.scrollLeft | | 0; Y1 = Document.documentElement.scrollTop | | 
} if (document.body) {x2 = Document.body.scrollLeft | | 0; y2 = Document.body.scrollTop | | 
0; } var x3 = Window.scrollx | | 
0; var y3 = window.scrolly | | 

scroll bar to horizontal distance at the top of the page var x = Math.max (x1, Math.max (x2, x3)); 

The vertical distance of the scroll bar to the top of the page var y = Math.max (y1, Math.max (y2, y3)); 
Rolling distance = current distance/speed, because the smaller distance, the speed is greater than 1 of the number, so the rolling distance will be more and more small var speed = 1 + acceleration; 

Window.scrollto (Math.floor (x/speed), Math.floor (Y/speed)); 
If the distance is not zero, continue to invoke the iteration this function if (x > 0 | | | y > 0) {var invokefunction = "Gotop (" + Acceleration + "," + Time + ")"; Window.settimeout (Invokefunction, Time); }} </script>

Document.documentElement.scrollTop, Document.body.scrollTop, window.scrolly are all the same, but they only work in some browsers. As for which browsers work, you can debug yourself.

How to use it?

Copy Code code as follows:

<a href= "#" onclick= "Gotop (); return false;" >TOP</a>

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: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.