Home > Developer > Web Develop
First, the use of HTML anchor tag is the simplest
But the only drawback is that the style is not very good and will show this anchor tag.
<aname= "Top" id= "Top" ></a>
Drop location after <body> label anywhere you want, just close to the top.
The bottom of the page is placed:
<ahref= "#top" target= "_self" > Return top </a>
Second, use the JavaScript scroll function to return to the top
The Scrooll function is used to control the position of the scroll bar, and there are two simple implementations:
Mode 1 (recommended: Simple and convenient):
<ahref= "Javascript:scroll (0,0)" > Back to Top </a>
Scroll the first parameter is the horizontal position, the second parameter is the vertical position, for example, to locate the vertical 50 pixels, change to scroll (0,50).
Mode 2 (Focus on effect: slow upward):
This method is to return to the top of the progressive, to look good, the code is as follows:
Functionpagescroll () {Window.scrollby (0,-10); Scrolldelay=settimeout (' PageScroll () ', 100);} <ahref= "PageScroll ();" > Back to Top </a>
This will dynamically return to the top, but even though the code is still running, it needs to be stopped in the PageScroll function plus a sentence.
if (document.documentelement.scrolltop==0) cleartimeout (scrolldelay);
Third, using the OnLoad plus scroll function to achieve dynamic return to the top
First, add the following before the end of the page body tag:
<divid= "Gotop" > Back to Top </div>
2. Then call the following JS script section:
Backtop=function (Btnid) {Varbtn=document.getelementbyid (Btnid); vard=document.documentelement;window.onscroll= Set;btn.onclick=function () {btn.style.display= ' none '; Window.onscroll=null;this.timer=setinterval (function () { D.scrolltop-=math.ceil (d.scrolltop*0.1); if (d.scrolltop==0) clearinterval (btn.timer,window.onscroll=set);},10);}; Functionset () {btn.style.display=d.scrolltop? ' Block ': ' None '}}; Backtop (' gotop ');
These can be placed in the Web page, or can be stored separately into a JS file, such as Gotop.js, and then through the following form:
<scriptsrc= "/js/gotop.js" type=text/javascript></script>
To invoke, of course, the position is best placed under the "top" label, the call method has assumed that the file path is JS, placed in other locations, depending on the actual modification.
Several popular web pages return to the top of the code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
