在一些网站上经常看到 当滚动条滚动到底部时候 会出现返回到顶部小按钮 当我点击时候 那个滚动条能迅速的或者均匀的返回到顶部这样的效果 今天也用了一个jquery写了一个简单的 原理很简单  除了iE6下 默认情况下用个fixed固定定位 定位到底部右侧 并隐藏起来 当我用滚动条滚动到一定距离后 让它显示 然后当我点击时候 让右侧滚动条迅速的或者均匀的返回到顶部！当然IE6下是不支持fixed 用了个绝对定位和表达式 但是又有个小问题 在IE6 7下会有一点点抖动  所以用html,html body {background-image:url(about:blank);background-attachment:fixed;} 这样的代码可以解决掉！！

代码如下：HTML/CSS

 

 
   
     
    
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3.  
    
  3. <head> 
    4.  
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5.  
    
  5. <title>无标题文档</title> 
    6.  
    
  6. <style> 
    7.  
    
  7. #top-back{position:fixed; right:20px; height:20px; bottom: 0px; display: none;*position:absolute;*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-20))} 
    8.  
    
  8. html,html body {background-image:url(about:blank);background-attachment:fixed;}  
    9.  
    
  9. </style> 
    10.  
    
  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>    
    11.  
    
  11. </head> 
    12.  
    
  12.  
    13.  
    
  13. <body> 
    14.  
    
  14.  
    15.  
    
  15.     <div style="height:2000px;"></div> 
    16.  
    
  16.     <div id="top-back">返回顶部</div> 
    17.  
   
 
   
Jquery如下：
 
   
 
 
   
 
   
     
    
  1. <script> 
    2.  
    
  2.     function topBack(){ 
    3.  
    
  3.         var sh = $(window).scrollTop(); 
    4.  
    
  4.         if(sh>100){ 
    5.  
    
  5.             $("#top-back").show(); 
    6.  
    
  6.         }else{ 
    7.  
    
  7.             $("#top-back").hide();   
    8.  
    
  8.         }    
    9.  
    
  9.     } 
    10.  
    
  10.     $(window).scroll(function(){ 
    11.  
    
  11.         topBack();   
    12.  
    
  12.     }) 
    13.  
    
  13.     $(window).resize(function(){ 
    14.  
    
  14.         topBack();   
    15.  
    
  15.     })   
    16.  
    
  16.     $("#top-back").click(function(){$("html,body").animate({scrollTop:"0px"},200)}); //点击返回顶部 
    17.  
    
  17. </script> 
    18.