jQuery实现返回顶部效果的方法_jquery
时间：2021-07-01 10:21:17
帮助过：2人阅读
本文实例讲述了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" ? $("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、引用页面：
希望本文所述对大家的jQuery程序设计有所帮助。
