Greasy Fork is available in English.

Scroll Top Button

Fast and lightweight scrolltop button

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