Code for sliding back to the top using jQuery

This article gives you a detailed description of the Code for sliding back to the top of jQuery implementation. The following describes the code using wordpress. In fact, this method can be used on any web page.

Code, but I cannot put it in html.

The Code is as follows:	Copy code
$ ('Html, body'). animate ({scrollTop: 0}, 500 );

(Here we use wp as an example) Direct code:

Html code, which is generally put in footer. php:

 

The Code is as follows:	Copy code
<A href = "#" id = "top"> return to the top part </a>

The CSS Code uses fixed to fix the object in the browser window:

 

The Code is as follows:	Copy code
# Top {position: fixed; bottom: 0; right: 10px ;}

JQuery code. Pay attention to the following conditions:

 

The Code is as follows:	Copy code
$ ('# Top '). click (function () {$ ('html, body '). animate ({scrollTop: '0px '}, 800); return false ;});

OK. This article is complete!

Next, let's look at an instance.

Div code

The Code is as follows:	Copy code
<Div class = "go"> <A id = "roll_top" title = "Back to Top"> </a> <A {put down the PHP code} title = "if you have any suggestions, please give us feedback! "> </A> <A id = "fall" title = "back to bottom"> </a> </Div>

1

The Code is as follows:	Copy code
<? Php if (! Is_home ()&&! Is_archive ():?> Id = "ct" <? Php endif;?>

The verification code is stored in the header.html template.

Css code

The Code is as follows:

Copy code

. Go {width: 47px; height: pixel PX; background-color: # FFF; position: fixed; _ position: absoluteright: 12px; bottom: 25%; border-radius: 5px; box-shadow: 0 0 2px # 6E6E6E} . Go a {background: url (images/top.png) no-repeat; display: block; text-indent: 999em; width: 37px; margin: 5px; border: 0; overflow: hidden; float: left} . Go. top {background-position: 4px 0; height: 20px} . Go. feedback {background-position: 4px-20px; height: 32px ;} . Go. bottom {background-position: 4px-52px; height: 22px ;} . Go. top: hover {background-position:-34px 0 ;} . Go. feedback: hover {background-position:-34px-20px ;} . Go. bottom: hover {background-position:-34px-52px ;}

CSS code in the style.css style table, where the image path is written according to the folder location you put

JS Code

The Code is as follows:

Copy code

JQuery (document). ready (function ($ ){ JQuery ('# roll_top'). click (function () {$ ('html, body'). animate ({scrollTop: '0px '}, 800 );}); JQuery ('# ct '). click (function () {$ ('html, body '). animate ({scrollTop: $ ('# comments '). offset (). top }, 800 );}); JQuery ('# fall '). click (function () {$ ('html, body '). animate ({scrollTop: $ ('. footer '). offset (). top }, 800 );}); }); // Context JQuery (document). ready (function (){ JQuery ('. entry_box_s'). hover ( Function (){ JQuery (this). find ('. context_t'). stop (true, true). fadeIn (); }, Function (){ JQuery (this). find ('. context_t'). stop (true, true). fadeOut (); } ); }); // More JQuery (document). ready (function (){ JQuery ('. entry_box'). hover ( Function (){ JQuery (this). find ('. archive_more'). stop (true, true). fadeIn (); }, Function (){ JQuery (this). find ('. archive_more'). stop (true, true). fadeOut (); } ); });