Simple return to the top code and comments

ArticleDirectory

• 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.
• 2. simple static return to the top, and use js to simulate the scroll effect and slide to the top
• 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

 

Recently, I made a ranking page, which has many categories and is displayed in graphic form... the page is obviously too long, so the user experience is naturally not good enough. Finally, I want to add the jump navigation in the upper part of the page, and navigate directly to the classification named anchor on this page. Of course, this requires a better experience with the "Back to Top" function. Of course, in general, we should first avoid too long pages, and the bounce rate will be high if the content is weak or not relevant enough.

The following describes how to simply return the top effect.CodeImplementation, with annotations.

 

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:Click the named anchor and return to the top of the preset element with the ID of top.

HTML code

<AHref= "# Top"Target= "_ Self">Back to 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)

HTML code

 
<AHref= "Javascript: Scroll (0, 0 )">Back to Top</A>
 

 Disadvantages:The returned results are immediate and do 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 JS Code

 Function Pagescroll (){
 //  Specifies 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, take document. Body. scrolltop; because only one of them takes effect, and the other is invariably set to 0, the value can get the real scrolltop value of the webpage.  
      VaR Stopdeskdocument.doc umentelement. scrolltop + document. Body. scrolltop;
 //  Determine 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 );
}

HTML code

<AOnclick= "Pagescroll ()">Back to Top</A>
 

Disadvantages:The scrolling effect is not smooth. If you click back to the top of the page for a long time, 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 JS Code

 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 results to the end of the element with the ID of page on the page  
 $ ("# Page"). append (gototop_html );
$ ("# Gototop"). Click ( //  Define the animation that returns to the top and clicks to scroll up 
 Function () {$ ('Html, body'). animate ({scrolltop: 0}, 700 );
}). Hover ( //  Add and delete CSS class for the feedback from the mouse on the top of the returned result.  
          Function () {$ ( This ). Addclass ("hover ");},
 Function () {$ ( This ). Removeclass ("hover ");
});
 //  Obtains 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 a handler for the scroll event of the window  
 $ (Window). Scroll ( Function (){
 // Obtains 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 on 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

 /*  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 ") } 
  /*  Feedback with mouse clicks  */ 
# 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.