jQuery实现返回顶部效果的方法

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

1、首先是CSS样式：

 
#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核心库）
复制代码 代码如下: 
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、引用页面：

 
 
  
   
   
   
   
     
   
   
   
   
     
    #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} 
     
   
  ///上面的是内部样式，上面已经有外部样式，如果不使用内部样式可以引入外部样式 
   
   
  
  
  
  
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
 
     



     
  

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