Use native js to make a simple sliding effect to return to the top_javascript skills

Many web pages will place a "return to top" button at the bottom, especially web pages without navigation at the bottom of the page. This can help visitors find the navigation again or review the advertisement (what a beautiful idea). As JavaScript has become more and more widely used in recent years, sliding effects are everywhere, so I followed suit and made the return to top function a sliding effect. Later, in order to better fit the physical characteristics, it was modified to have a decelerating sliding effect.

First let’s talk about the principle. We will get the distance from the scroll bar to the top of the page, and then move it up a certain distance; then get the distance from the scroll bar to the top of the page, and move it up a certain distance (a little smaller than the last time); And so on...

<script type="text/javascript"> 
/** 
* 回到页面顶部 
* @param acceleration 加速度 
* @param time 时间间隔 (毫秒) 
**/
function goTop(acceleration, time) { 
acceleration = acceleration || 0.1; 
time = time || 16; 

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 || 0; 
} 
if (document.body) { 
x2 = document.body.scrollLeft || 0; 
y2 = document.body.scrollTop || 0; 
} 
var x3 = window.scrollX || 0; 
var y3 = window.scrollY || 0; 

// 滚动条到页面顶部的水平距离 
var x = Math.max(x1, Math.max(x2, x3)); 
// 滚动条到页面顶部的垂直距离 
var y = Math.max(y1, Math.max(y2, y3)); 

// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 
var speed = 1 + acceleration; 
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); 

// 如果距离不为零, 继续调用迭代本函数 
if(x > 0 || y > 0) { 
var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; 
window.setTimeout(invokeFunction, time); 
} 
} 
</script>

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY are actually the same, but they only work in some browsers. As for which one works in which browsers, you can debug it yourself.

How to use?

Copy code The code is as follows:

TOP