jQuery实现返回顶部效果的方法
本文实例讲述了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:10px00} #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)});});functionup(){$wd=jQuery(window);$wd.scrollTop($wd.scrollTop()-1);fq=setTimeout("up()",50)};functiondn(){$wd=jQuery(window);$wd.scrollTop($wd.scrollTop()+1);fq=setTimeout("dn()",50)};
3、引用页面:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <basehref="<%=basePath%>"> <title>MyJSP'index.jsp'startingpage</title> <metahttp-equiv="pragma"content="no-cache"> <metahttp-equiv="cache-control"content="no-cache"> <metahttp-equiv="expires"content="0"> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> <metahttp-equiv="description"content="Thisismypage"> <!-- <linkrel="stylesheet"type="text/css"href="styles.css"> --> <styletype="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:10px00} #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> ///上面的是内部样式,上面已经有外部样式,如果不使用内部样式可以引入外部样式 <scripttype="text/javascript"src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <scripttype="text/javascript"src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <scripttype="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> <divid="shangxia"> <divid="shang"title="↑返回顶部"></div> <divid="comt"title="沙发还没有被抢哦"></div> <divid="xia"title="↓移至底部"></div> </div> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。