Examples of jquery back to top

The simplest way of writing-site effect:

The code is as follows:	Copy code
$ (Document). ready (function (){ $ ('A [href = # top] '). click (function (){ $ ('HTML, body'). animate ({scrollTop: 0}, 'Low '); Return false; }); }); <A href = "#" title = "Back To The Top"> Top </a>

Further ui experience improvement-when a scroll bar appears-not a plug-in version

The code is as follows:

Copy code

<P id = "back-to-top"> <a href = "# top"> <span> </span> Return to the top </a> </p> <Script type = "text/javascript"> $ (Document). ready (function (){ // First hide # back-to-top $ ("# Back-to-top"). hide (); // When the position of the scroll bar is below 100 pixels from the top, the jump link appears; otherwise, it disappears. $ (Function (){ $ (Window). scroll (function (){ If ($ (window). scrollTop ()> 100 ){ $ ("# Back-to-top"). fadeIn (1500 );                  } Else { $ ("# Back-to-top"). fadeOut (1000 );                  } }); // When you click the jump link, return to the top of the page $ ("# Back-to-top"). click (function (){ $ ('Body, html '). animate ({scrollTop: 0}, 1000 ); Return false; }); }); }); </Script>

Cute jQuery plug-in that scrolls Back to top-jQuery B

Supported: Firefox, Chrome and IE7 +

Javascript

The code is as follows:	Copy code
<Script type = "text/javascript" src = "js/jquery. backtotop. js"> </script> <Script type = "text/javascript"> $ ("# Back-to-top"). backToTop (); </Script>

Supported: all browsers

First, add the following html elements to the top:

The code is as follows:	Copy code
<P id = "back-to-top"> <a href = "# top"> <span> </span> Return to the top </a> </p>

The a tag points to the top of the anchor, which can prevent an anchor of <a name = "top"> </a> on the top, in this way, when the browser does not support js, it can return the result of the top.

To display the image at the top of the returned result on the right side, you also need some css styles, as shown below:

The code is as follows:

Copy code

/* ReturnTop */ P # back-to-top { Position: fixed; Display: none; Bottom: 100px; Right: 80px; } P # back-to-top { Text-align: center; Text-decoration: none; Color: # d1d1d1; Display: block; Width: 64px; /* Use the transition attribute in CSS3 to add the gradient effect to the text in the jump link */ -Moz-transition: color 1 s; -Webkit-transition: color 1 s; -O-transition: color 1 s; } P # back-to-top a: hover { Color: #979797; } P # back-to-top a span { Background: transparent url (/static/imgs/sprite.png? 1202) no-repeat-25px-290px; Border-radius: 6px; Display: block; Height: 64px; Width: 56px; Margin-bottom: 5px; /* Use the transition attribute in CSS3 to add a gradient effect to the <span> label background color */ -Moz-transition: background 1 s; -Webkit-transition: background 1 s; -O-transition: background 1 s; } # Back-to-top a: hover span { Background: transparent url (/static/imgs/sprite.png? 1202) no-repeat-25px-290px; }

The background image in the above style is a sprite Image. The following two independent back-to-top images are provided for your convenience:

  
With html and style, we also need to use js to control the return button on the top. When the page is scrolling, the return button will gradually fade away.

The code is as follows:

Copy code

<Script src = "/jQuery/jquery-1.7.2.min.js"> </script> <Script> $ (Function (){ // When the position of the scroll bar is below 100 pixels from the top, the jump link appears; otherwise, it disappears. $ (Function (){ $ (Window). scroll (function (){ If ($ (window). scrollTop ()> 100 ){ $ ("# Back-to-top"). fadeIn (1500 );                 } Else                 { $ ("# Back-to-top"). fadeOut (1500 );                 } }); // When you click the jump link, return to the top of the page $ ("# Back-to-top"). click (function (){ $ ('Body, html '). animate ({scrollTop: 0}, 1000 ); Return false; }); }); }); </Script>