jQuery实现返回顶部效果的方法_Javascript教程-查字典教程网

摘要：本文实例讲述了jQuery实现返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下：1、首先是CSS样式：/*updown*/#sha...

本文实例讲述了jQuery实现返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下：

1、首先是CSS样式：

/*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" "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、引用页面：

<!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">  <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> 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 <div id="shangxia"> <div id="shang" title="↑ 返回顶部"></div> <div id="comt" title="沙发还没有被抢哦"></div> <div id="xia" title="↓ 移至底部"></div> </div> </body> </html>

希望本文所述对大家的jQuery程序设计有所帮助。