☰

Scroll Top Button

Fast and lightweight scrolltop button

当前为 2017-12-25 提交的版本，查看 最新版本。

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