Make a simple return to the top with native JavaScript

Many pages have a "back to top" button underneath, especially one that doesn't have navigation at the bottom of the page, which can help visitors navigate again or revisit the ad (think it's beautiful). With the increasing use of JavaScript in recent years, the sliding effect is everywhere, so I also follow the following, will return to the top of the function made of sliding effect. Later, in order to better fit the physical characteristics, the transformation made a deceleration of the sliding effect.

First, let's say the principle, 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, move up a certain distance (smaller than the previous);

First, the code: Ruyang County First High School

View Source print?

01	<script type="text/javascript">

02

/**

03

* 回到页面顶部

04	* @param acceleration 加速度

05	* @param time 时间间隔 (毫秒)

06

**/

07	functiongoTop(acceleration, time) {

08	acceleration = acceleration || 0.1;

09	time = time || 16;

10

11	varx1 = 0;

12	vary1 = 0;

13	varx2 = 0;

14	vary2 = 0;

15	varx3 = 0;

16	vary3 = 0;

17

18	if(document.documentElement) {

19	x1 = document.documentElement.scrollLeft || 0;

20	y1 = document.documentElement.scrollTop || 0;

21

}

22	if(document.body) {

23	x2 = document.body.scrollLeft || 0;

24	y2 = document.body.scrollTop || 0;

25

}

26	varx3 = window.scrollX || 0;

27	vary3 = window.scrollY || 0;

28

29	// 滚动条到页面顶部的水平距离

30	varx = Math.max(x1, Math.max(x2, x3));

31	// 滚动条到页面顶部的垂直距离

32	vary = Math.max(y1, Math.max(y2, y3));

33

34	// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小

35	varspeed = 1 + acceleration;

36	window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

37

38	// 如果距离不为零, 继续调用迭代本函数

39	if(x > 0 || y > 0) {

40	varinvokeFunction = "goTop(" + acceleration + ", "+ time + ")";

41	window.setTimeout(invokeFunction, time);

42

}

43

}

44

</script>

Effect demo back to top

Document.documentElement.scrollTop, Document.body.scrollTop, window.scrolly are actually the same, but they only work in some browsers. As for that which in which browser functions can debug itself.

How to use?

View Source print?

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

Make a simple return to the top with native JavaScript