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...
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
|
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?