search

Home >Web Front-end >JS Tutorial >Three implementations of returning the page to the top (anchor tag, js)_javascript skills

Three implementations of returning the page to the top (anchor tag, js)_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:49:291229browse

This article introduces three simple codes to return to the top of the page. You can use simple HTML (http://www.jb51.net/web/62651.html) anchor tag, or you can use Javascript Scroll (http://www.jb51.net/article/31422.htm) The function returns dynamically. Others include floating scripts, which are a bit complicated. This article will not introduce them again. You can choose one of them according to your needs. But, in short, simplicity is the most beautiful. If you can reduce the code, reduce the code. If you can't call it, don't call it. If the articles on Tianyuan Blog were not good, this function would not be added.

1. Use anchor tags to return to the top of the page

Using HTML anchor tags is the easiest, but it looks a bit ugly. After clicking, this anchor tag will be displayed in the address bar , nothing else.
Place it at the top of the page:

Place it anywhere after the tag. Just stay close to the top.
Place at the bottom of the page:
Return to the top

2. Use the Javascript Scroll function to return to the top

The scroll function is used to control the position of the scroll bar. There are two very simple implementation methods:
Method 1:
Return to top
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 vertically, change it to scroll(0,50) That's it.
Method 2:
This method is a progressive return to the top, which looks better. The code is as follows:

Copy code The code is as follows:

function pageScroll() {
window.scrollBy(0,-10);
scrolldelay = setTimeout('pageScroll()',100);
}
Return to top

This will dynamically return to the top, but although it returns to the top, the code is still running. You also need to add a sentence to the pageScroll function to stop it.
Copy code The code is as follows:
if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay) ;


3. Use Onload plus the scroll function to dynamically return to the top

1. First, add:
< before the end of the BODY tag on the web page ;div id="gotop">Return to top

2. Then call the following JS script part (this script is not original by Tianyuan and was collected from the Z-BLOG official forum earlier. The source package has not yet been With author link, if the original author sees it, please leave a message and add it):
Copy code The code is as follows:

BackTop=function(btnId){
var btn=document.getElementById(btnId);
var d=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);
};
function set (){btn.style.display=d.scrollTop?'block':"none"}
};
BackTop('gotop');

For Z-BLOG In other words, it can be placed in the $(document).ready(function(){.... function, or it can be saved independently as a js file, such as gotop.js, and then passed:

to call. Of course, it is best to place it under the "Return to Top" label. This calling method assumes that the path is JS. Please refer to other locations. Modify yourself.
Supplement:
The above return to top codes are all in text format. You can also change the text to a more beautiful icon. There is also a floating return to top code (that is, when the page scrolls, the return to top icon will also follow. The kind that runs) requires the use of layers, etc., which is a bit complicated and will not be listed in this article.
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
Previous article：Jquery graphic report plug-in jqplot introduction and detailed parameter explanation_jqueryNext article：Jquery graphic report plug-in jqplot introduction and detailed parameter explanation_jquery

Related articles

See more