Home > Developer > JavaScript
This article introduces three simple return page top codes. You can use simple HTMLhttp: // www.metsky.com/archives/189.html anchor or Javascript Scrollhttp: // www.bkjia.com/kf/201203/123882.html function to return dynamic results, the rest are also complicated, such as floating scripts. This article will not introduce them any more. You can choose one of them based on your needs. In short, the simplest and most beautiful code can reduce the code, if it is not available, do not call it. If it is not for tianyuan's blog articles, it will not be added to this function.
I. Return to the top of the page with an anchor flag
The simplest way to use the HTML anchor tag is to look a little ugly. After clicking it, this anchor tag will be displayed in the address bar. Nothing else.
Place at the top of the page:
<A name = "top" id = "top"> </a>
You can place the location after the <body> label in any place, as long as it is close to the top.
Place at the bottom of the page:
<A href = "# top" target = "_ self"> return to the top </a>
Ii. Use the Javascript Scroll function to return to the top
The scrooll function is used to control the position of a scroll bar. There are two simple implementation methods:
Method 1:
View source
1 <a href = "javascript: scroll (0, 0)"> return to the top </a>
The first parameter of scroll is the horizontal position, and the second parameter is the vertical position. For example, you can change it to scroll () to locate it at 50 pixels vertically.
Method 2:
This method is to incrementally return to the top. The Code is as follows:
View source
Print?
1 function pageScroll (){
2 window. scrollBy (0,-10 );
3 scrolldelay = setTimeout ('pagescroll () ', 100 );
4}
5
6 <a href = "pageScroll ();"> return to the top </a>
In this way, the top is returned dynamically, but the code is still running even though the code is returned to the top. You also need to add a sentence in the pageScroll function to stop the code.
View source
1 if(document.doc umentElement. scrollTop = 0) clearTimeout (scrolldelay );
3. Use Onload and scroll to dynamically return to the top
1. Add the following before the webpage BODY Tag ends:
<Div id = "gotop"> Back to Top </div>
2, and then call the following JS script part (this script is not original tianyuan, earlier from the Z-BLOG official forum to collect, the source package without the author link, if the original author see please leave a message to add ):
View source
01 BackTop = function (btnId ){
02 var btn = document. getElementById (btnId );
03 var d1_document.doc umentElement;
04 window. onscroll = set;
05 btn. onclick = function (){
06 btn. style. display = "none ";
07 window. onscroll = null;
08 this. timer = setInterval (function (){
09 d. scrollTop-= Math. ceil (d. scrollTop * 0.1 );
10 if (d. scrollTop = 0) clearInterval (btn. timer, window. onscroll = set );
11}, 10 );
12 };
13 function set () {btn. style. display = d. scrollTop? 'Block': "none "}
14 };
15 BackTop ('gotop ');
For the Z-BLOG, you can put it in the $ (document). ready (function () {... function, you can also save it into a js file independently, such as gotop. js, and then through:
<SCRIPT src = "/js/gotop. js" type = text/javascript> </SCRIPT>
Of course, it is best to place the location under the "Back to Top" label. This call method has assumed the path is JS, Please modify it for other locations.
Supplement:
The code above returned to the top of the page is a text style, you can also change the text to a beautiful icon, and there is also a floating back code on the top (that is, when the page is scrolling, back to the top icon will also run), need to use the layer, it is a bit complicated, this article does not list.
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
