This article introduces three simple codes to return to the top of the page, which can use simple HTML (https:///web/) anchor tags, or Javascript Scroll (https:///article/) Function dynamic return, and other floating scripts are a bit complicated. This article will not introduce it anymore. You can choose one of them according to your needs. In short, the simplest and most beautiful ones are. If you can reduce the code, you can reduce the code. If you can not call it, don’t call it. If it weren’t for the articles on Tianyuan’s blog, you wouldn’t have added this function.
1. Use anchor tags to return to the top of the page
The simplest way to use HTML anchor tags is that they look a bit bad. After clicking, the anchor tag will be displayed in the address bar, and nothing else is.
Placed at the top of the page:
<a name="top" ></a>
You can find a place after the <body> tag, just close to the top.
Placed at the bottom of the page:
<a href="#top" target="_self">Back to top</a>
2. Use Javascript Scroll function to return to the top
The scroll function is used to control the position of the scroll bar, and there are two simple implementation methods:
Method 1:
<a href="javascript:scroll(0,0)">Back to top</a>
The first parameter of scroll is the horizontal position, and the second parameter is the vertical position. For example, if you want to position it at 50 pixels perpendicularly, just change it to scroll(0,50).
Method 2:
This method is a progressive return to the top, which is better looking, the code is as follows:
function pageScroll() {
(0,-10);
scrolldelay = setTimeout('pageScroll()',100);
}
<a href="pageScroll();">Back to top</a>
This will dynamically return to the top, but although it returns to the top, the code is still running. You still need to add a sentence to the pageScroll function and stop it.
3. Use Onload plus scroll function to dynamically return to the top
1. First add before the end of the BODY tag on the web page:
<div >Back to top</div>
2. Then call the following JS script part (this script is not original by Tianyuan. It was collected from the official Z-BLOG forum earlier. The source package does not include the author link. If the original author sees it, please leave a message to add):
BackTop=function(btnId){
var btn=(btnId);
var d=;
=set;
=function (){
="none";
=null;
=setInterval(function(){
-=(*0.1);
if(==0) clearInterval(,=set);
},10);
};
function set(){=?'block':"none"}
};
BackTop('gotop');
For Z-BLOG, it can be placed in the $(document).ready(function(){.... function, or it can be stored independently as a js file, for example, and then passed:
<SCRIPT src="/js/" type=text/javascript></SCRIPT>
To call it, of course, it is best to place the location below the "Back to Top" tag. The calling method has assumed that the path is JS, please modify it yourself in other locations.
Replenish:
The above-mentioned codes returning to the top are all in text styles. You can also replace the text with a more beautiful icon. There is also a floating code that returns to the top (that is, the type that returns to the top icon will follow when the page is scrolling). You need to use layers, etc., which is a bit complicated and will not be listed in this article.
1. Use anchor tags to return to the top of the page
The simplest way to use HTML anchor tags is that they look a bit bad. After clicking, the anchor tag will be displayed in the address bar, and nothing else is.
Placed at the top of the page:
<a name="top" ></a>
You can find a place after the <body> tag, just close to the top.
Placed at the bottom of the page:
<a href="#top" target="_self">Back to top</a>
2. Use Javascript Scroll function to return to the top
The scroll function is used to control the position of the scroll bar, and there are two simple implementation methods:
Method 1:
<a href="javascript:scroll(0,0)">Back to top</a>
The first parameter of scroll is the horizontal position, and the second parameter is the vertical position. For example, if you want to position it at 50 pixels perpendicularly, just change it to scroll(0,50).
Method 2:
This method is a progressive return to the top, which is better looking, the code is as follows:
Copy the codeThe code is as follows:
function pageScroll() {
(0,-10);
scrolldelay = setTimeout('pageScroll()',100);
}
<a href="pageScroll();">Back to top</a>
This will dynamically return to the top, but although it returns to the top, the code is still running. You still need to add a sentence to the pageScroll function and stop it.
Copy the codeThe code is as follows:
if(==0) clearTimeout(scrolldelay);
3. Use Onload plus scroll function to dynamically return to the top
1. First add before the end of the BODY tag on the web page:
<div >Back to top</div>
2. Then call the following JS script part (this script is not original by Tianyuan. It was collected from the official Z-BLOG forum earlier. The source package does not include the author link. If the original author sees it, please leave a message to add):
Copy the codeThe code is as follows:
BackTop=function(btnId){
var btn=(btnId);
var d=;
=set;
=function (){
="none";
=null;
=setInterval(function(){
-=(*0.1);
if(==0) clearInterval(,=set);
},10);
};
function set(){=?'block':"none"}
};
BackTop('gotop');
For Z-BLOG, it can be placed in the $(document).ready(function(){.... function, or it can be stored independently as a js file, for example, and then passed:
<SCRIPT src="/js/" type=text/javascript></SCRIPT>
To call it, of course, it is best to place the location below the "Back to Top" tag. The calling method has assumed that the path is JS, please modify it yourself in other locations.
Replenish:
The above-mentioned codes returning to the top are all in text styles. You can also replace the text with a more beautiful icon. There is also a floating code that returns to the top (that is, the type that returns to the top icon will follow when the page is scrolling). You need to use layers, etc., which is a bit complicated and will not be listed in this article.