The example in this article describes the method that jquery implements to return the top effect. Share to everyone for your reference. The implementation methods are as follows:
1, first is the CSS style:
/*updown*/
#shangxia {Position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none}
#shang, #comt, #xia {background:url (... /images/sprite.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0}
#shang {background-position:0 -308px} #comt {background-position:0 -338px;height:32px}
#xia {background-position:0- 376PX}
#comt: hover{background-position:-31px-338px} #shang: hover{background-position:-31px-308px}
#xia: HOVER{BACKGROUND-POSITION:-31PX-376PX}
2, then the jquery code: (to introduce the jquery core library)
Copy Code code as follows:
/*updown*/
JQuery (document). Ready (function ($) {$body = (Window.opera)? (Document.compatmode = = "Css1compat"? $ ("HTML"): $ ("Body"): $ ("Html,body"), $ ("#shang"). MouseOver (function () {Up ()}) . mouseout (function () {cleartimeout (FQ)}). Click (function () {$body. Animate ({scrolltop:0},400)}); $ ("#xia"). MouseOver (function () {DN ()}). Mouseout (function () {cleartimeout (FQ)}). Click (function () {$body. Animate ({scrolltop: $ (document). Height ()},400)}; $ ("#comt"). Click (function () {$body. Animate ({scrolltop: $ ("#comments"). Offset (). Top}, 400)}); function up () {$wd = JQuery (Windows); $wd. scrolltop ($wd. scrolltop ()-1); FQ = settimeout ("Up ()")};function dn () {$wd = j Query (window); $wd. scrolltop ($wd. scrolltop () + 1); FQ = settimeout ("DN ()", 50)};
3. Reference page:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
I hope this article will help you with your jquery programming.