☰

Scroll To Top

Scroll To Top.

  1. // ==UserScript==
  2. // @name        Scroll To Top
  3. // @description Scroll To Top.
  4. // @namespace   2k1dmg@userscript
  5. // @license     GPL version 3 or any later version; http://www.gnu.org/licenses/gpl.html
  6. // @include     *
  7. // @version     1
  8. // @author      2k1dmg
  9. // @grant       none
  10. // @noframes
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. var sttClassName = 'coTcfkMc_scrollToTop';
  17. var timeoutID;
  18. function scrollToTop() {
  19. 	var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  20. 	var ch = document.documentElement.clientHeight;
  21. 	if(scrolled === 0) {
  22. 		clearTimeout(timeoutID);
  23. 		timeoutID = null;
  24. 		return;
  25. 	}
  26. 	else if(scrolled < ch) {
  27. 		window.scrollTo(0,parseInt(scrolled/1.3));
  28. 	}
  29. 	else if(scrolled < ch * 3) {
  30. 		window.scrollTo(0,parseInt(scrolled/1.5));
  31. 	}
  32. 	else {
  33. 		window.scrollTo(0,parseInt(scrolled/2));
  34. 	}
  35. 	timeoutID = setTimeout(scrollToTop, 15);
  36. }
  37.  
  38. function onClick(event) {
  39. 	if(typeof timeoutID == 'number')
  40. 		return;
  41. 	scrollToTop();
  42. }
  43.  
  44. function toggleScrollToTop() {
  45. 	var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  46. 	var ch = document.documentElement.clientHeight;
  47. 	var elm = document.querySelector('.'+sttClassName);
  48. 	if(scrolled > ch/1.1) {
  49. 		elm.style.cssText = 'display: block;';
  50. 	}
  51. 	else {
  52. 		elm.style.cssText = 'display: none;';
  53. 	}
  54. }
  55. window.onscroll = toggleScrollToTop;
  56.  
  57. window.onwheel = function() {
  58. 	if(typeof timeoutID != 'number')
  59. 		return;
  60. 	clearTimeout(timeoutID);
  61. 	timeoutID = null;
  62. };
  63.  
  64. function addCSSStyle() {
  65. 	var cssStyle = document.createElement('style');
  66. 	cssStyle.type = 'text/css';
  67. 	cssStyle.textContent = [
  68. 		'.'+sttClassName+' {',
  69. 		'	width: 40px;',
  70. 		'	height: 40px;',
  71. 		'	line-height: 30px;',
  72. 		'	text-align: center;',
  73. 		'	background: whiteSmoke;',
  74. 		'	font-weight: bold;',
  75. 		'	font-size: 25px;',
  76. 		'	color: #444;',
  77. 		'	text-decoration: none;',
  78. 		'	position: fixed;',
  79. 		'	bottom: 0;',
  80. 		'	right: 0;',
  81. 		'	display: none;',
  82. 		'	border: 1px solid grey;',
  83. 		'	border-top-left-radius: 8px;',
  84. 		'	box-shadow: 0 0 3px grey;',
  85. 		'	transition: opacity 250ms ease-out;',
  86. 		'	opacity: .1;',
  87. 		'	z-index: 1000;',
  88. 		'	cursor: pointer;',
  89. 		'}',
  90. 		'.'+sttClassName+':hover {',
  91. 		'	text-decoration: none;',
  92. 		'	opacity: 1;',
  93. 		'}'
  94. 	].join('\n');
  95. 	if(document.head)
  96. 		document.head.appendChild(cssStyle);
  97. }
  98.  
  99. addCSSStyle();
  100. var div = document.createElement('div');
  101. div.className = sttClassName;
  102. div.textContent = '↑';
  103. div.onclick = onClick;
  104. document.body.appendChild(div);
  105. toggleScrollToTop();
  106.  
  107. })();