☰

Up

кнопка "вверх" в ГВД.

  1. // ==UserScript==
  2. // @name           Up
  3. // @author         sw.East
  4. // @description    кнопка "вверх" в ГВД.
  5. // @namespace      https://openuserjs.org/users/chesheerk/scripts
  6. // @homepageURL    https://www.heroeswm.ru/pl_info.php?id=3541252
  7. // @supportURL     https://www.heroeswm.ru/pl_info.php?id=3541252
  8. // @version        0.3
  9. // @icon           http://i.imgur.com/GScgZzY.jpg
  10. // @require        https://code.jquery.com/jquery-3.3.1.min.js
  11. // @include        *//*.heroeswm.*/*
  12. // @include        *//178.248.235.15/.php*
  13. // @include        *//*.lordswm.*/*
  14. // @grant          GM_addStyle
  15. // @copyright      2013-2018, sw.East (https://www.heroeswm.ru/pl_info.php?id=3541252)
  16. // @license        MIT
  17. // @run-at         document-end
  18. // ==/UserScript==
  19.  
  20. /** === Style === */
  21. GM_addStyle ( `
  22.  
  23.     #up {
  24.         background: none;
  25.  
  26.         border: 7px solid #7D614C;
  27.         border-radius: 50%;
  28.  
  29.         margin: 0 auto;
  30.         padding:5px;
  31.  
  32.         height:7px;
  33.         width:100px;
  34.  
  35.         outline:none;
  36.         text-decoration: none;
  37.  
  38.         display:none;
  39.         right: -15;
  40.         bottom: 50%;
  41.         position: fixed;
  42.     }
  43. 	.round {
  44.         background: #44372C;
  45.         background: -webkit-radial-gradient(center, #A16A31, #16130E);
  46.         background: -moz-radial-gradient(center, #A16A31, #16130E);
  47.         background: radial-gradient(ellipse at A16A31, #A18031, #16130E);
  48.  
  49. 		border: 4px solid #CC9A2B;
  50. 		border-radius: 50%;
  51.  
  52. 		display: block;
  53. 		position: absolute;
  54. 		left: 10;
  55. 		bottom: -25;
  56.  
  57.         margin:0 auto;
  58.         padding:0;
  59.  
  60.         height:60px;
  61.         width:60px;
  62.  
  63.         cursor:pointer;
  64. 		text-decoration: none;
  65. 		text-align: center;
  66. 		z-index: 2;
  67.  
  68.  box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
  69. 	}
  70.  
  71. 	.round:hover {
  72.  
  73.         background:                                                          rgba(91, 61, 51, 1.0);
  74.         background: -webkit-radial-gradient(top left, rgba(91, 61, 51, 1.0), rgba(22, 19, 14, 1.0));
  75.         background:    -moz-radial-gradient(top left, rgba(91, 61, 51, 1.0), rgba(22, 19, 14, 1.0));
  76.         background:         radial-gradient(top left, rgba(91, 61, 51, 1.0), rgba(22, 19, 14, 1.0));
  77.  
  78. -webkit-box-shadow: inset 5px 5px 12px -7px rgba(0,0,0,0.75);
  79.    -moz-box-shadow: inset 5px 5px 12px -7px rgba(0,0,0,0.75);
  80.         box-shadow: inset 5px 5px 12px -7px rgba(0,0,0,0.75);
  81.  
  82. 		z-index: 2;
  83. 		border-radius: 50%;
  84.  
  85. 		-webkit-transform: rotate(-360deg);
  86. 		   -moz-transform: rotate(-360deg);
  87. 		     -o-transform: rotate(-360deg);
  88. 		        transform: rotate(-360deg);
  89. 	}
  90.  
  91. .ts {
  92. 	display: block;
  93. 	position: absolute;
  94. 	left: 15;
  95. 	top: 20;
  96.  
  97. 	font-family: Arial;
  98. 	font-size: 20px;
  99. 	font-weight: bold;
  100.  
  101. 	color: #CC9A2B;
  102.  
  103. 	text-shadow:
  104. 		-0   -1px 3px #201712,
  105. 		 0   -1px 3px #201712,
  106. 		-0    1px 3px #201712,
  107. 		 0    1px 3px #201712,
  108. 		-1px -0   3px #201712,
  109. 		 1px -0   3px #201712,
  110. 		-1px  0   3px #201712,
  111. 		 1px  0   3px #201712,
  112. 		-1px -1px 3px #201712,
  113. 		 1px -1px 3px #201712,
  114. 		-1px  1px 3px #201712,
  115. 		 1px  1px 3px #201712,
  116. 		-1px -1px 3px #201712,
  117. 		 1px -1px 3px #201712,
  118. 		-1px  1px 3px #201712,
  119. 		 1px  1px 3px #201712;
  120. }
  121.  
  122. ` );
  123.  
  124. /* Style End */
  125.  
  126.     $(document).ready(function(){
  127.  
  128.         // крепим элемент позади меню
  129.         $('#breadcrumbs').append('<div id="up" class="hvr-box-shadow-inset"><div class="round hvr-box-shadow-inset"><span class="ts">Up</span></div></div>');
  130.  
  131.         /** При прокрутке страницы, показываем или срываем кнопку */
  132.         $(window).scroll(function () {
  133.             // Если отступ сверху больше 50px то показываем кнопку "Наверх"
  134.             if ($(this).scrollTop() > 50) {
  135.                 $('#up').fadeIn();
  136.             } else {
  137.                 $('#up').fadeOut();
  138.             }
  139.         });
  140.  
  141.         /** При нажатии на кнопку мы перемещаемся к началу страницы */
  142.         $('#up').click(function () {
  143.             $('body,html').animate({
  144.                 scrollTop: 0
  145.             }, 500);
  146.             return false;
  147.         });
  148.     });