Home > Web Front-end > JS Tutorial > body text

After clicking TOP, it does not jump directly to the top of the page, but scrolls up_javascript skills

WBOY
Release: 2016-05-16 19:18:52
Original
1090 people have browsed it

If the web page is too long, anchor tags are generally used to quickly return to the TOP
top It is indeed very simple, but there are some masters Make this simple:

Overseas demo address: http://tonyyoo.com/v2/

After clicking TOP, it does not jump directly to the top of the page, but scrolls Up. . And the longer it is from the top of the page, the faster it will scroll. . .

After some research, there are 4 JS used:





Looks like It's all so complicated. . I don’t know if there is any simpler code that can achieve the same effect. I can’t do it. .
After the page is onloaded, traverse all hyperlinks and determine whether there is a #header in the href. If so, just trigger scrollTo. . .


[Ctrl A select all Note:
If you need to introduce external Js, you need to refresh to execute <script> function s2top(){ var a = document.getElementsByTagName('a'); var l = a.length; for (var i = 0 ; i < l ; i ++){ var ai = a[i]; if (/#header$/.test(ai.href)){ ai.onclick = function(){ var o = this; var ot = o.offsetTop; for (var t = 0 ; t < 20 ; t ++){ setTimeout("scrollBy(0,-" + parseInt(ot / 20) + ")",t * 50 + 1); } return false; } } } } </script>]<script> for (var i = 0 ; i < 1000 ; i ++) document.write(i+" "); </script>
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!