Merge pull request #95 from EngineGPDev/The-scroll-button-has-been-updated

The scroll button has been updated

template/all.html

@@ -102,7 +102,7 @@
     <script type="text/javascript" src="[js]bootbox.js"></script>
     <script type="text/javascript" src="[js]code.js"></script>
     <script type="text/javascript" src="[js]functions.js"></script>
-    <script type="text/javascript" src="[js]top.js"></script>
+    <script type="text/javascript" src="[js]scrollup.js"></script>
     <script type="text/javascript" src="[js]google-translate.js"></script>
     <script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>
     <script type="text/javascript" src="[js]jquery.cookie.min.js"></script>
@@ -166,9 +166,6 @@
             |_auth|
         </div>
     </div>
-    <p id="back-top">
-        <a href="#top"><span></span>Вверх</a>
-    </p>
     <div class="nav">
         [nav]
     </div>
@@ -245,5 +242,8 @@
             <span class="l-6"></span>
         </div>
     </div>
+
+    <div class="scroll-button" id="scroll-up">&#9650;</div>
+    <div class="scroll-button" id="scroll-down">&#9660;</div>
 </body>
 </html>

template/css/style.css

@@ -1510,48 +1510,34 @@ blockquote {
     word-wrap: break-word
 }
 
-/*Стилизация кнопки ВВЕРХ */
-#back-top {
+.scroll-button {
+    width: 50px; /* Ширина кнопки */
+    height: 50px; /* Высота кнопки */
     position: fixed;
-    bottom: 30px;
-    left: 50%;
-    margin-left: 200px
-}
-
-#back-top a {
-    width: 64px;
-    display: block;
+    bottom: 20px; /* Отступ от нижнего края */
+    background-color: rgba(252, 252, 252, 0.8); /* Полупрозрачный фон */
+    color: #aaa;
+    font-size: 25px; /* Размер значка */
     text-align: center;
-    font: 11px/100% Arial, Helvetica, sans-serif;
-    text-transform: uppercase;
-    text-decoration: none;
-    color: #bbb;
-    /* background color transition */
-    -webkit-transition: 1s;
-    -moz-transition: 1s;
-    transition: 1s;
+    line-height: 50px; /* Центрируем текст по вертикали */
+    border-radius: 10px; /* Закругленные углы */
+    cursor: pointer;
+    transition: background .2s ease, opacity .2s ease;
+    opacity: 0.5; /* Полупрозрачная кнопка */
 }
 
-#back-top a:hover {
-    color: #000;
+.scroll-button:hover {
+    background-color: rgba(238, 238, 238, 0.8); /* Прозрачность при наведении */
+    color: #777777;
+    opacity: 1; /* Полная непрозрачность при наведении */
 }
 
-/* графическая стрелка ВВЕРХ */
-#back-top span {
-    width: 64px;
-    height: 50px;
-    display: block;
-    background: url(../images/up-arrow.png) no-repeat center center;
-    -webkit-border-radius: 15px;
-    -moz-border-radius: 15px;
-    border-radius: 15px;
-    -webkit-transition: 1s;
-    -moz-transition: 1s;
-    transition: 1s;
+#scroll-up {
+    right: 80px; /* Отступ от правого края для кнопки "Наверх" */
 }
 
-#back-top a:hover span {
-    background-color: #eeeeee26
+#scroll-down {
+    right: 20px; /* Отступ от правого края для кнопки "Вниз" */
 }
 
 .partnerList {

template/js/scrollup.js

@@ -0,0 +1,56 @@
+/*
+ * EngineGP   (https://enginegp.ru or https://enginegp.com)
+ *
+ * @copyright Copyright (c) 2018-present Solovev Sergei <inbox@seansolovev.ru>
+ *
+ * @link      https://github.com/EngineGPDev/EngineGP for the canonical source repository
+ * @link      https://gitforge.ru/EngineGP/EngineGP for the canonical source repository
+ *
+ * @license   https://github.com/EngineGPDev/EngineGP/blob/main/LICENSE MIT License
+ * @license   https://gitforge.ru/EngineGP/EngineGP/src/branch/main/LICENSE MIT License
+ */
+
+var lastScrollPosition = 0;
+var scrollUpClicked = false;
+
+$(document).ready(function() {
+    $('#scroll-up').click(function() {
+        lastScrollPosition = $(document).scrollTop();
+        $('html, body').animate({ scrollTop: 0 }, 1000);
+        scrollUpClicked = true;
+    });
+
+    $('#scroll-down').click(function() {
+        if (scrollUpClicked) {
+            $('html, body').animate({ scrollTop: lastScrollPosition }, 1000);
+        } else {
+            $('html, body').animate({ scrollTop: $(document).height() }, 1000);
+        }
+    });
+
+    $(document).scroll(function() {
+        var scrollTop = $(document).scrollTop();
+
+        if (scrollTop > 0) {
+            $('#scroll-up').fadeIn();
+        } else {
+            $('#scroll-up').fadeOut();
+        }
+
+        if (scrollTop < $(document).height() - $(window).height()) {
+            $('#scroll-down').fadeIn();
+        } else {
+            $('#scroll-down').fadeOut();
+        }
+    });
+
+    // Убедитесь, что кнопка "Наверх" скрыта при загрузке страницы
+    $('#scroll-up').hide();
+
+    // Проверяем начальное положение страницы при загрузке для кнопки "Вниз"
+    if ($(document).scrollTop() < $(document).height() - $(window).height()) {
+        $('#scroll-down').show();
+    } else {
+        $('#scroll-down').hide();
+    }
+});

template/js/top.js

@@ -1,35 +0,0 @@
-/*
- * EngineGP   (https://enginegp.ru or https://enginegp.com)
- *
- * @copyright Copyright (c) 2018-present Solovev Sergei <inbox@seansolovev.ru>
- *
- * @link      https://github.com/EngineGPDev/EngineGP for the canonical source repository
- * @link      https://gitforge.ru/EngineGP/EngineGP for the canonical source repository
- *
- * @license   https://github.com/EngineGPDev/EngineGP/blob/main/LICENSE MIT License
- * @license   https://gitforge.ru/EngineGP/EngineGP/src/branch/main/LICENSE MIT License
- */
-
-$(document).ready(function () {
-    // появление/затухание кнопки #back-top
-    $(function () {
-        // прячем кнопку #back-top
-        $("#back-top").hide();
-
-        $(window).scroll(function () {
-            if ($(this).scrollTop() > 100) {
-                $("#back-top").fadeIn();
-            } else {
-                $("#back-top").fadeOut();
-            }
-        });
-
-        // при клике на ссылку плавно поднимаемся вверх
-        $("#back-top a").click(function () {
-            $("body,html").animate({
-                scrollTop: 0
-            }, 800);
-            return false;
-        });
-    });
-});