Home  >  Article  >  Web Front-end  >  JavaScript simply implements the function of returning to the top of the web page_javascript skills

JavaScript simply implements the function of returning to the top of the web page_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:15:54921browse

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...

Copy the code The code is as follows:



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
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn