本文實例講述了jQuery實現返回頂部效果的方法。分享給大家供大家參考。具體實現方法如下：
1、首先是CSS樣式：
?
1 2 3 4 5 6 7 /*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、接著是jquery代碼：(要引入jQuery核心庫)
復制代碼 代碼如下:
/*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(window);$wd.scrollTop($wd.scrollTop() - 1);fq = setTimeout("up()", 50)};function dn() {$wd = jQuery(window);$wd.scrollTop($wd.scrollTop() + 1);fq = setTimeout("dn()", 50)};
3、引用頁面：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <style type="text/css"> /*updown*/ #shangxia{position:fixed;top:60%;right:50%;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} /*存檔*/ </style> ///上面的是內部樣式，上面已經有外部樣式，如果不使用內部樣式可以引入外部樣式 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="js/updown/devework.js"></script> </head> <body> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <div id="shangxia"> <div id="shang" title="↑ 返回頂部"></div> <div id="comt" title="沙發還沒有被搶哦"></div> <div id="xia" title="↓ 移至底部"></div> </div> </body> </html>希望本文所述對大家的jQuery程序設計有所幫助。