☰

Scroll Top Button

Fast and lightweight scrolltop button

目前为 2017-12-19 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name Scroll Top Button
  3. // @description Fast and lightweight scrolltop button
  4. // @author NeoCortex
  5. // @license MIT
  6. // @version 0.1.1
  7. // @include *://*
  8. // @namespace https://greasyfork.org/users/12790
  9. // ==/UserScript==
  10. (function (window, undefined) {
  11.     var w;
  12.     if (typeof unsafeWindow !== undefined) {
  13.         w = unsafeWindow;
  14.     } else {
  15.         w = window;
  16.     }
  17.  
  18.     if (w.self != w.top) {
  19.         return;
  20.     }
  21. 	  var buttonMargins = '15px';
  22. 	  var buttonEdges = '4px';
  23. 	  var buttonSize = '40px';
  24. 	  var buttonOpacity = '0.3';
  25. 	  var buttonHoverOpacity = '0.7';
  26. 	  var fontSize = '35px';
  27. 	  var buttonColor = 'black';
  28. 	  var transitionDelay = '.3s';
  29. 	  var transitionType = 'ease-in-out';
  30.  
  31. 	  var btnClass = Math.random().toString(36).replace(/[^a-z]+/g, '');
  32. 	  var styles = '.' + btnClass + '{';
  33. 	  styles += 'position: fixed;';
  34. 	  styles += 'cursor: pointer;';
  35. 	  styles += 'bottom: ' + buttonMargins + ';';
  36. 	  styles += 'right: ' + buttonMargins + ';';
  37. 	  styles += 'border-radius: ' + buttonEdges + ';';
  38. 	  styles += 'width: ' + buttonSize + ';';
  39. 	  styles += 'height: ' + buttonSize + ';';
  40. 	  styles += 'opacity: ' + buttonOpacity + ';';
  41. 	  styles +='z-index: 99;';
  42. 	  styles += 'transition: all ' + transitionDelay + ' ' + transitionType + ';';
  43. 	  styles += 'background: ' + buttonColor + ';}';
  44. 	  styles += '.' + btnClass + ':hover{';
  45. 	  styles += 'opacity: ' + buttonHoverOpacity + ';';
  46.       styles += 'transform:scale(1.1);}';
  47. 	  styles += '.' + btnClass + '>span{';
  48. 	  styles += 'color: white;opacity: 1;font-size:' + fontSize + ';';
  49. 	  styles += 'width:100%;height:100%;margin:0 auto;display:block;';
  50. 	  styles += 'line-height:' + buttonSize + ';text-align:center;}';
  51. 	  styles += '.' + btnClass + '.' + btnClass + '_hidden{';
  52. 	  styles += 'opacity: 0;transition: all ' + transitionDelay +' ' + transitionType + '}';
  53. 	  var btn = document.createElement('div');
  54. 	  var style = document.createElement('style');
  55. 	  style.innerHTML = styles;
  56. 	  document.body.appendChild(style);
  57. 	  btn.className = btnClass + (w.scrollY === 0 ? ' ' + btnClass + '_hidden' : '');
  58. 	  btn.innerHTML = '<span>&#129145;</span>';
  59. 	  btn.addEventListener('click', function scrollToTop() {
  60. 	  var scrollDuration = 700;
  61. 	  const   scrollHeight = w.scrollY,
  62. 			  scrollStep = Math.PI / ( scrollDuration / 15 ),
  63. 			  cosParameter = scrollHeight / 2;
  64. 	  var     scrollCount = 0,
  65. 			  scrollMargin,
  66. 			  scrollInterval = setInterval( function() {
  67. 				  if ( w.scrollY !== 0 ) {
  68. 					  scrollCount = scrollCount + 1;
  69. 					  scrollMargin = cosParameter - cosParameter * Math.cos( scrollCount * scrollStep );
  70. 					  w.scrollTo( 0, ( scrollHeight - scrollMargin ) );
  71. 				  }
  72. 				  else clearInterval(scrollInterval);
  73. 			  }, 15 );
  74. 	  }, false);
  75. 	  document.addEventListener('scroll', function (event) {
  76. 		  var btn = document.querySelector('.' + btnClass);
  77. 		  if(w.scrollY === 0) {
  78. 			btn.className = btnClass + ' ' + btnClass + '_hidden';
  79. 			setTimeout(function(){
  80. 			  btn.style.right = '-9999px';
  81. 			}, 300);
  82. 		  } else {
  83. 			btn.style.right = buttonMargins;
  84. 			btn.className = btnClass;
  85. 		  }
  86. 	  });
  87.     w.onload = function() {
  88.         document.body.appendChild(btn);
  89.     };
  90. })(window);