WebページにgotoTop(上部に戻る)ボタンを追加

9597 ワード
js。 gototop 

  
  
  
  
    
   
   
   
   
  1. /** 
    2. 
   
   
   
   
  2.  *        gotop  。 
    3. 
   
   
   
   
  3.  *     JS  ，     CSS HTML  。 
    4. 
   
   
   
   
  4.  * 
    5. 
   
   
   
   
  5.  * @param int width        ，       
    6. 
   
   
   
   
  6.  * - 0         
    7. 
   
   
   
   
  7.  * - -1         
    8. 
   
   
   
   
  8.  * -                
    9. 
   
   
   
   
  9.  * @return void 
    10. 
   
   
   
   
  10.  * @link http://blog.830725.com/post/add-goto-top-button.html 
    11. 
   
   
   
   
  11.  */ 
    12. 
   
   
   
   
  12. function gotoTop(width) 
    13. 
   
   
   
   
  13. { 
    14. 
   
   
   
   
  14.   document.write('<a id="goto-top">^</a>'); 
    15. 
   
   
   
   
  15.   var gotop = document.querySelector('#goto-top'); 
    16. 
   
   
   
   
  16.   /*      CSS      */ 
    17. 
   
   
   
   
  17.   gotop.style.visibility='hidden'; 
    18. 
   
   
   
   
  18.   gotop.style.cursor='pointer'; 
    19. 
   
   
   
   
  19.   gotop.style.position = 'fixed'; 
    20. 
   
   
   
   
  20.   gotop.style.fontSize='2.5em'; 
    21. 
   
   
   
   
  21.   gotop.style.fontWeight='900'; 
    22. 
   
   
   
   
  22.   gotop.style.textAlign='center'; 
    23. 
   
   
   
   
  23.   gotop.style.background = 'gray'; 
    24. 
   
   
   
   
  24.   gotop.style.borderRadius = '0.2em'; 
    25. 
   
   
   
   
  25.   gotop.style.width='1.4em'; 
    26. 
   
   
   
   
  26.   gotop.style.height='1em'; 
    27. 
   
   
   
   
  27.   gotop.style.top = (document.documentElement.clientHeight / 2) + 100 + 'px'; 
    28. 
   
   
   
   
  28.   gotop.style.opacity='0.3'; 
    29. 
   
   
   
   
  29.   gotop.style.visibility = (document.body.scrollTop + document.documentElement.scrollTop > 10) ? 'visible' : 'hidden'; 
    30. 
   
   
   
   
  30.   if(0 == width) 
    31. 
   
   
   
   
  31.   { gotop.style.left = '0em';  } 
    32. 
   
   
   
   
  32.   else if(-1 == width) 
    33. 
   
   
   
   
  33.   { gotop.style.right = '0em';  } 
    34. 
   
   
   
   
  34.   else 
    35. 
   
   
   
   
  35.   { 
    36. 
   
   
   
   
  36.   var resize = function() 
    37. 
   
   
   
   
  37.   { 
    38. 
   
   
   
   
  38.   var left = (document.documentElement.clientWidth - width) / 2 + width + 10; 
    39. 
   
   
   
   
  39.   if((left - gotop.clientWidth) < width) 
    40. 
   
   
   
   
  40.   { 
    41. 
   
   
   
   
  41.   gotop.style.right='0em'; 
    42. 
   
   
   
   
  42.   gotop.style.left = null;  //    right  ，     left  。 
    43. 
   
   
   
   
  43.   } 
    44. 
   
   
   
   
  44.   else 
    45. 
   
   
   
   
  45.   { 
    46. 
   
   
   
   
  46.   gotop.style.left = left + 'px'; 
    47. 
   
   
   
   
  47.   gotop.style.right = null; 
    48. 
   
   
   
   
  48.   } 
    49. 
   
   
   
   
  49.   }; 
    50. 
   
   
   
   
  50.   resize(); 
    51. 
   
   
   
   
  51.   window.addEventListener('resize', function() 
    52. 
   
   
   
   
  52.   { 
    53. 
   
   
   
   
  53.   resize(); 
    54. 
   
   
   
   
  54.   }, false); 
    55. 
   
   
   
   
  55.   
    56. 
   
   
   
   
  56.   } 
    57. 
   
   
   
   
  57.   gotop.addEventListener('mouseover', function() 
    58. 
   
   
   
   
  58.   { 
    59. 
   
   
   
   
  59.   this.style.opacity='0.8'; 
    60. 
   
   
   
   
  60.   this.style.textDecoration='none'; 
    61. 
   
   
   
   
  61.   }, false); 
    62. 
   
   
   
   
  62.   gotop.addEventListener('mouseout', function() 
    63. 
   
   
   
   
  63.   { 
    64. 
   
   
   
   
  64.   this.style.opacity='0.3'; 
    65. 
   
   
   
   
  65.   }, false); 
    66. 
   
   
   
   
  66.   gotop.addEventListener('click', function() 
    67. 
   
   
   
   
  67.   { 
    68. 
   
   
   
   
  68.   // IE9 opera body.scrollTop 0，chrome documentElement.scrollTop 0 
    69. 
   
   
   
   
  69.   //         0 
    70. 
   
   
   
   
  70.   var h = document.body.scrollTop + document.documentElement.scrollTop; //      
    71. 
   
   
   
   
  71.   var t = window.setInterval(function() 
    72. 
   
   
   
   
  72.   { 
    73. 
   
   
   
   
  73.   window.scrollTo(0,h -= 100); //     100   
    74. 
   
   
   
   
  74.   if(h <= 0) 
    75. 
   
   
   
   
  75.   { window.clearInterval(t);  } 
    76. 
   
   
   
   
  76.   }, 5); 
    77. 
   
   
   
   
  77.   }, false); 
    78. 
   
   
   
   
  78.   /*   window.onscroll             */ 
    79. 
   
   
   
   
  79.   window.addEventListener('scroll', function() 
    80. 
   
   
   
   
  80.   { 
    81. 
   
   
   
   
  81.   var scrollTop = document.body.scrollTop + document.documentElement.scrollTop; 
    82. 
   
   
   
   
  82.   gotop.style.visibility = scrollTop > 10 ? 'visible':'hidden'; 
    83. 
   
   
   
   
  83.   }, false); 
    84. 
   
   
   
   
  84. }; 
    85.

原文住所:http://blog.830725.com/post/add-goto-top-button.html
本文は“コードコレクション”のブログから出て、転載して作者と連絡してください!
弾性箱モデル(一)