Code returned to the top of the page (multiple methods) with a note

The following is a simple code implementation for returning the top effect, with a comment.
1. The simplest static return to the top of the page. Click to jump directly to the top of the page. This function is usually used to return to the top of the page, which is fixed at the bottom of the page.
Method 1: Use the named anchor to click and return to the top element with the preset id as top.
Copy codeThe Code is as follows:
<A href = "# top" target = "_ self"> return to the top </a>

Method 2: The scrooll function is used to control the position of the scroll bar (the first parameter is the horizontal position, and the second parameter is the vertical position)
Copy codeThe Code is as follows:
<A href = "javascript: scroll (0, 0)"> return to the top </a>

Disadvantage: The returned result is immediate and does not conform to the general Page scrolling feeling;
Static is fixed at the bottom of the page, which is not necessarily visible to users.

2. simple static return to the top, and use js to simulate the scroll effect and slide to the top
Copy codeThe Code is as follows:
Function pageScroll (){
// Specify the number of vertices for content scrolling (the first parameter is the number of vertices to the right and the second parameter is the number of vertices to scroll down)
Window. scrollBy (0,-100 );
// Delayed recursive call to simulate rolling up
Scrolldelay = setTimeout ('pagescroll () ', 100 );
// Obtain the scrolltopvalue, indicating that the standard dtdpage obtains document.doc umentElement. scrollTop; otherwise, the document. body. scrollTop is obtained. Because only one of them takes effect, and the other is always 0, the actual scrollTop value can be obtained for the page.
Var stopdeskdocument.doc umentElement. scrollTop + document. body. scrollTop;
// Determine whether to cancel the code delay when the page reaches the top (otherwise, the page cannot be browsed down normally when it is rolled to the top)
If (sTop = 0) clearTimeout (scrolldelay );
}

Copy codeThe Code is as follows:
<A onclick = "pageScroll ()"> return to the top </a>

Disadvantage: the scrolling effect is not smooth. If you click back to the top of the page when the page is very long, the page cannot be browsed normally until it reaches the top of the page;
The above is still static at the bottom of the page, and may not be exposed to users.

3. Dynamic Loading on demand, return to the top, and absolute position on the css side screen, combined with simple jQuery animation for a better experience
Copy codeThe Code is as follows:
Function gotoTop (min_height ){
// Return the html code at the top of the page. Its css style is not displayed by default.
Var gotoTop_html = '<div id = "gotoTop"> Back to Top </div> ';
// Insert the html code at the top of the returned result to the end of the element with the id of page on the page
$ ("# Page"). append (gotoTop_html );
$ ("# GotoTop"). click (// defines the animation that returns the top click to scroll up
Function () {$ ('html, body'). animate ({scrollTop: 0}, 700 );
}). Hover (// Add the mouse input feedback to the top of the returned result, and implement it by adding or deleting the css class.
Function () {$ (this). addClass ("hover ");},
Function () {$ (this). removeClass ("hover ");
});
// Obtain the minimum page height. If no value is input, the default value is 600 pixels.
Min_height? Min_height = min_height: min_height = 600;
// Bind the handler for the scroll event of the window
$ (Window). scroll (function (){
// Obtain the vertical position of the scroll bar of the window
Var s = $ (window). scrollTop ();
// When the vertical position of the scroll bar of the window is greater than the minimum height of the page, let the elements at the top of the returned result fade away; otherwise, fade away
If (s> min_height ){
$ ("# GotoTop"). fadeIn (100 );
} Else {
$ ("# GotoTop"). fadeOut (200 );
};
});
};
GotoTop ();

Css style code:
Copy codeThe Code is as follows:
/* Default style, mainly position: fixed for absolute screen positioning */
# GotoTop {display: none; position: fixed; top: 75%; left: 50%; cursor: pointer; margin-top:-50px; margin-left: 520px; padding: 9px 4px; width: 20px; text-align: center; border: 1px solid # e0e0e0; background: # fff ;}
/* Use a CSS expression (expression) to implement the position: fixed effect in ie6 */
# GotoTop {_ position: absolute; _ top: expression (documentElement. scrollTop + documentElement. clientHeight * 3/4 + "px ")}
/* Click the mouse to enter the feedback */
# GotoTop. hover {background: #5CB542; color: # fff; text-decoration: none ;}

This method is used to determine the page height and display the "Back to Top" to the user as needed. The css style is used to achieve absolute screen positioning and jQuery is used to achieve better smooth scrolling. To further consider, if the user sets a browser to disable js, we can combine the third solution with solution 1. After disabling js, the third solution will not be seen by the user, if it is not disabled, add a sentence in the js Code to hide the first scheme.

In short, the long page should be avoided as much as possible. Inevitably, adding the "Back to Top" function may bring a better user experience.