返回顶部js代码

 

js返回顶部_js

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title“返回顶部”效果</title> 
  5. <meta http-equiv="content-type" content="text/html;charset=gb2312"> 
  6. <style type="text/css"> 
  7. .backToTop { 
  8.  display: none; 
  9.  width: 18px; 
  10.  line-height: 1.2; 
  11.  padding: 5px 0; 
  12.  background-color: #000; 
  13.  color: #fff; 
  14.  font-size: 12px; 
  15.  text-align: center; 
  16.  position: fixed; 
  17.  _position: absolute; 
  18.  right: 10px; 
  19.  bottom: 100px; 
  20.  _bottom: "auto"; 
  21.  cursor: pointer; 
  22.  opacity: .6; 
  23.  filter: Alpha(opacity=60); 
  24. } 
  25. </style> 
  26. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
  27. </head> 
  28. <body> 
  29. <p>如果预览时左下角提示错误，<font color=red>请先刷新一下本页面</font>就可以看到效果了。</p> 
  30. <p>  拖动滚动条到页面底部就会显示“返回顶部”按钮。</p> 
  31. <p></p> 
  32. <div style="height:2000px;"></div> 
  33. <script type="text/javascript"> 
  34. (function() { 
  35.     var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) 
  36.         .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { 
  37.             $("html, body").animate({ scrollTop: 0 }, 120); 
  38.     }), $backToTopFun = function() { 
  39.         var st = $(document).scrollTop(), winh = $(window).height(); 
  40.         (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); 
  41.         //IE6下的定位 
  42.         if (!window.XMLHttpRequest) { 
  43.             $backToTopEle.css("top", st + winh - 166); 
  44.         } 
  45.     }; 
  46.     $(window).bind("scroll", $backToTopFun); 
  47.     $(function() { $backToTopFun(); }); 
  48. })(); 
  49. </script> 
  50. </body> 
  51. </html>