js返回頂部

技術小胖子發表於2017-11-09
JS

返回頂部js程式碼

 

 



    

  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. <title“返回頂部”效果</title> 
    5. 

  5. <meta http-equiv=“content-type” content=“text/html;charset=gb2312”> 
    6. 

  6. <style type=“text/css”> 
    7. 

  7. .backToTop { 
    8. 

  8.  display: none; 
    9. 

  9.  width: 18px; 
    10. 

  10.  line-height: 1.2; 
    11. 

  11.  padding: 5px 0; 
    12. 

  12.  background-color: #000; 
    13. 

  13.  color: #fff; 
    14. 

  14.  font-size: 12px; 
    15. 

  15.  text-align: center; 
    16. 

  16.  position: fixed; 
    17. 

  17.  _position: absolute; 
    18. 

  18.  right: 10px; 
    19. 

  19.  bottom: 100px; 
    20. 

  20.  _bottom: “auto”; 
    21. 

  21.  cursor: pointer; 
    22. 

  22.  opacity: .6; 
    23. 

  23.  filter: Alpha(opacity=60); 
    24. 

  24. } 
    25. 

  25. </style> 
    26. 

  26. <script type=“text/javascript” src=“http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”></script> 
    27. 

  27. </head> 
    28. 

  28. <body> 
    29. 

  29. <p>如果預覽時左下角提示錯誤，<font color=red>請先重新整理一下本頁面</font>就可以看到效果了。</p> 
    30. 

  30. <p>  拖動滾動條到頁面底部就會顯示“返回頂部”按鈕。</p> 
    31. 

  31. <p></p> 
    32. 

  32. <div style=“height:2000px;”></div> 
    33. 

  33. <script type=“text/javascript”> 
    34. 

  34. (function() { 
    35. 

  35.     var $backToTopTxt = “返回頂部”, $backToTopEle = $(`<div class=“backToTop”></div>`).appendTo($(“body”)) 
    36. 

  36.         .text($backToTopTxt).attr(“title”, $backToTopTxt).click(function() { 
    37. 

  37.             $(“html, body”).animate({ scrollTop: 0 }, 120); 
    38. 

  38.     }), $backToTopFun = function() { 
    39. 

  39.         var st = $(document).scrollTop(), winh = $(window).height(); 
    40. 

  40.         (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); 
    41. 

  41.         //IE6下的定位 
    42. 

  42.         if (!window.XMLHttpRequest) { 
    43. 

  43.             $backToTopEle.css(“top”, st + winh – 166); 
    44. 

  44.         } 
    45. 

  45.     }; 
    46. 

  46.     $(window).bind(“scroll”, $backToTopFun); 
    47. 

  47.     $(function() { $backToTopFun(); }); 
    48. 

  48. })(); 
    49. 

  49. </script> 
    50. 

  50. </body> 
    51. 

  51. </html> 
    52. 



 




      本文轉自許琴 51CTO部落格，原文連結：http://blog.51cto.com/xuqin/929315，如需轉載請自行聯絡原作者




















相關文章