Several common web page return to top codes

韦小宝
Release: 2017-11-23 10:02:32
Original
13237 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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);
Copy after login

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>
Copy after login

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?&#39;block&#39;:"none"}};BackTop(&#39;gotop&#39;);
Copy after login

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>
Copy after login

. 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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!