Back to the top of the page method summary

First, use the Anchor point link

There is no doubt that the use of anchor links is a simple function to return to the top of the implementation. The implementation mainly places a named anchor link at the top of the page, and then we place a link back to the anchor at the bottom of the page, and the user clicks on the link to return to the top position of the anchor point.

The sample code is as follows:

<!--define an anchor point link named top-->

<a name= "Top" ></a>

<!--here is the main content of the Web page, omitted-->

<!--returns the link--> the top anchor point of the page
<a href= "#top" > Back to Top </a>

It is noteworthy that in modern browsers, if the browser cannot find the specified anchor point (for example, top), the browser will attempt to jump to the starting position of the HTML element with the top ID. So we can also place an HTML element with the top ID on the head, and unfortunately not all browsers--especially older versions of some browsers--are compatible with this behavior.

Second, the use of JS function Scrollto ()

Of course, we can also use JavaScript to provide our function Scrollto (x, y) to return to the top of the page function. The Scrollto function can scroll to the content at the specified coordinates (x, y). We set the coordinates to (0, 0) to return to the top of the function.

<a href= "Javascript:scrollto (0,0);" > Back to Top </a>

Third, the use of JS operation Dom Style

In addition, we can also use JS to the body or HTML elements such as the ScrollTop property set to 0, you can scroll to the top of the page. We typically use jquery to implement this code.

Here are three ways to return to the top of the page

$ (window). scrolltop (0);

$ (' body '). scrolltop (0);

$ (' HTML '). scrolltop (0);

In addition, we can use jquery's animation effect function animate () to achieve smooth scrolling to the top of the page animation effect.

Smooth scrolling to the top of the page within 500 milliseconds

$ (' body '). Animate ({scrolltop:0}, 500);

Four, this way is the progressive return to the top, to look good, the code is as follows:

function PageScroll () {
Window.scrollby (0,-10);
Scrolldelay = settimeout (' PageScroll () ', 100);
}
<a href= "PageScroll ();" > Back to Top </a>

This will dynamically return to the top, but although the code is still running back to the top, you need to stop the PageScroll function by adding a sentence.

Copy code code as follows: if (document.documentelement.scrolltop==0) cleartimeout (scrolldelay);

five, simple static return to the top, with JS simulation scrolling effect on the top of the slide

JS Code

function PageScroll () {
Scrolls the content by the specified number of pixels (the number of pixels that the first parameter scrolls to the right, and the second parameter scrolls down in numbers)
Window.scrollby (0,-100);
Delay recursive call to simulate scrolling upward effect
Scrolldelay = settimeout (' PageScroll () ', 100);
Gets the scrolltop value, declares the standard Web page of the DTD to fetch DOCUMENT.DOCUMENTELEMENT.SCROLLTOP,
Otherwise take document.body.scrollTop, because only one of them will take effect, and the other will be 0, so take and value
Can get the real scrolltop value of the page
var stop=document.documentelement.scrolltop+document.body.scrolltop;
Determine when the page reaches the top, cancel the delay code (otherwise the page scrolling to the top will not be able to browse the page normally)
if (stop==0) cleartimeout (scrolldelay);
}

HTML code

<a onclick= "PageScroll ()" > Back to Top </a>

Disadvantages: The scrolling effect is not smooth, and in the page is very long click to return to the top, not up to the top of the page can no longer normal browsing page;

Ditto is still static fixed at the bottom of the page, not necessarily exposed to the user.