Several common web page return to top codes

It is very common in websites to click to return to the head, and click to return to the top. Today we will talk about those particularly simple clicks to return to Code of header .

1. It is easiest to use HTML anchor tag

But the only disadvantage is that the style is not very good, and this anchor tag will be displayed.

<aname="top"id="top"></a>

You can place it anywhere after the tag, as long as it is close to the top.

Place at the bottom of the page:

<ahref="#top"target="_self">返回顶部</a>

2. Use Javascript Scroll function to return to the top

scroll The function is used to control the position of the scroll bar. There are two very simple implementation methods:

Method 1 (recommended: simple and convenient):

<ahref="javascript:scroll(0,0)">返回顶部</a>

scroll first The parameter is the horizontal position, and the second parameter is the vertical position. For example, if you want to position it at 50 pixels vertically, just change it to scroll(0,50).

Method 2 (focus on the effect: slowly upward):

This method is a gradual return to the top, which looks better. The code is as follows:

functionpageScroll(){window.scrollBy(0,-10);scrolldelay=setTimeout(&#39;pageScroll()&#39;,100);}<ahref="pageScroll();">返回顶部</a>

This will dynamically return to the top, but although it returns to the top, the code is still running, and you need to add a sentence to the pageScroll function to stop it.

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

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

1. First, add it before the end of the body tag of the web page Above:

<divid="gotop">返回顶部</div>

2. Then call the following JS script part:

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 saved independently as a js file , such as gotop.js, and then call it in the following form:

<scriptsrc="/js/gotop.js"type=text/javascript></script>

. Of course, it is best to place it under the "Return to Top" label. This calling method has assumed that the file path is JS and placed it in another location. Please modify according to actual situation.

The above are several commonly used web pagesReturn to the top code, you can modify it yourself and then use it. For more, go to PHP Chinese website to search~

Related recommendations:

JavaScript simply returns to the top code and comments

CSS-Return to top code_html/css_WEB-ITnose

Return to top code for intelligent hiding and sliding effects implemented with jQuery_jquery

The above is the detailed content of Several common web page return to top codes. For more information, please follow other related articles on the PHP Chinese website!