RealAdmin

Создаём кнопку «наверх» для сайта

Создаём кнопку «наверх» для сайта
Комментарии: 105

Рассмотрим простой способ создания кнопки «наверх» для сайта, которая будет появляться при прокрутке страницы вниз. Разберем возможность реализации на jquery и чистом javascript. Найдём причины, по которым она может не работать.

Порядок действий:

  1. подключить jQuery;
  2. загрузить на сайт изображение кнопки;
  3. добавить код, скрипт и стили.

Подключаем jQuery — прописываем загрузку последней версии библиотеки в секции «head» шаблона или где-то вверхней части сайта.

<script src="https://code.jquery.com/jquery-git.min.js"></script>

Выбираем подходящее изображение и загружаем его в каталог сайта. Представлю на выбор несколько вариантов. Скачать можно кликнув правой клавишей мышки по рисунку и нажав «Сохранить картинку как».

кнопка Наверх для сайта кнопка Вверх кнопка Наверх большая кнопка Наверх простая кнопка наверх
width: 100px;
height: 40px;
width: 74px;
height: 94px;
width: 60px;
height: 60px;
width: 67px;
height: 80px;
width: 63px;
height: 61px;

Вставляем код, скрипт и стиль. В стилях указываем свой путь к изображению, его ширину и высоту.

// код
<div id="upbutton"></div>

// скрипт
<script>
    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 100)) {
            if ($('#upbutton').is(':hidden') {
                $('#upbutton').css({opacity : 1}).fadeIn('slow');
            }
        } else { 
            $('#upbutton').stop(true, false).fadeOut('fast'); 
        }
    });
    $('#upbutton').on('click', function() {
        $('html, body').stop().animate({scrollTop : 0}, 300);
    });
</script>

// стили
<style>
  #upbutton {
    background: url("/images/up.png") no-repeat top left;
    height: 60px;
    width: 60px;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    display: none;
    position: fixed;
    z-index: 999;
  }
</style>

Скорость прокрутки можно регулировать в этой строке, изменяя число «300»:

$('html, body').stop().animate({scrollTop : 0}, 300);

Как сделать кнопку без jQuery

Можно сделать плавающую кнопку «наверх» на чистом JavaScript без использования сторонних библиотек. Стили берём из предыдущего примера. Скрипт и код копируем в любое место шаблона.

// код
<a id="upbutton" href="#" onclick="smoothJumpUp(); return false;">
    <img src="/images/up.png" alt="Top" border="none" title="Наверх">
</a>

// скрипт
<script>
    var smoothJumpUp = function() {
        if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
            window.scrollBy(0,-50);
            setTimeout(smoothJumpUp, 10);
        }
    }
    
    window.onscroll = function() {
      var scrolled = window.pageYOffset || document.documentElement.scrollTop;
      if (scrolled > 100) {
      	document.getElementById('upbutton').style.display = 'block';
      } else {
      	document.getElementById('upbutton').style.display = 'none';
      }
    }
</script>

Первая функция отвечает за автоматическое перемещение к началу страницы, а вторая — за показ и скрытие кнопки в зависимости от положения прокрутки.

Что делать, если кнопка «наверх» не работает

Если кнопка не отображается, то измените в стилях свойство «display: none;» на «display: block;» и проверьте, появится ли она. Нет? Значит проблема в неправильном пути к изображению или код размещён в неподходящем месте. Попробуйте разместить его перед закрывающимся тегом «body».

Если кнопка при изменении свойства отображается, значит дело в скриптах. Следует проверить корректность подключения библиотеки jQuery и отсутствия конфликтов с другими скриптами. Всё в порядке? Тогда оберните скрипт в следующую конструкцию.

<script>
    window.onload = function () {
    //здесь скрипт
    }
</script>

Это позволит выполнить скрипт после загрузки всей страницы. Не помогло? Пиши в комментариях и постараемся найти проблему вместе.

Ещё интересное — 6
Комментарии —
  1. Razor
    Razor10 апреля 2015, 18:11#
    На Java работает, но вот картинка не отображается, по всякому пробовал.
    1. Razor
      Razor10 апреля 2015, 19:48#
      В wordpress втулил это дело в подвал и на dispaly:block; поменял в стилях. «Изображение» в ссылки пишет, а саму картинку не отображает. Такие дела.
      1. Andy Si11 апреля 2015, 10:59#
        Значит путь к изображению неправильно прописал. Скрипт был опробован уже сайтах на 10 как минимум, везде работал.
        1. Вячеслав
          Вячеслав30 июня 2017, 14:18#
          Спасибо
          https://gosstandart.info/ все руки не доходили. вот поставил. мило смотрится, даже дизайн менять не стал пока. для мобильной версии сайта с длиннными текстами, вещь незаменимая! «Я СПОКОЙНО МОГУ НАЖАТЬ КНОПКУ HOME ИЛИ КЛИКНУТЬ ПО ПОЛОСЕ ПРОКРУТКИ!!!» ну ну… Так что ставим аккуратные прозрачные кнопочки, тестируем на полезность и не слушаем никого!
      2. Комментарий был удален.
        1. А-лат
          А-лат12 августа 2015, 17:16#
          Живи вечно, чувак!
          1. 0bush
            0bush11 февраля 2016, 13:56#
            Супер. Спасибо.
            1. Игорь
              Игорь21 апреля 2016, 09:11#
              Здравствуйте. Кнопка отображается не на всех страницах сайта. Подскажите пожалуйста, что может быть? Очень нужно…
              1. Andy Si21 апреля 2016, 09:24#
                Код не на всех страницах размещён. jQuery не на всех страницах подключена. Ошибки в других скриптах мешают выполнению нижележащего javascript кода. Вот основные причины.
                1. Наталья
                  Наталья09 февраля 2018, 18:23#
                  Здравствуйте у меня тоже кнопка отображается только на 1 стр.
                  http://ao-constar.com.ua/produkciya.php
                  на др. нет
                  1. Andy Si11 февраля 2018, 18:56#
                    Наталья, у вас на странице http://ao-constar.com.ua/produkciya.php подлючена библиотека jquery, а на других — нет. Из-за этого не работает, добавляйте на все страницы:
                    <script type="text/javascript" src="js/jquery.js"></script>
                    1. Наталья
                      Наталья12 февраля 2018, 12:03#
                      Спасибочки большое за подсказку, все работает.
              2. Комментарий был удален.
                1. Максим
                  Максим18 мая 2016, 12:09#
                  А как сделать кнопку «На главную» в таком же стили при помощи javascript?
                  1. Andy Si18 мая 2016, 15:38#
                    В каком стиле? Вместо div поставить a и поставить соответствующую ссылку на главную страницу.
                  2. Комментарий был удален.
                    1. steve3009
                      steve300912 июня 2016, 20:17(был изменён)#
                      Привет.
                      Спасибо за кнопку. Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется.
                      Подскажите, пожалуйста, что не так.
                      1. steve3009
                        steve300912 июня 2016, 20:25(был изменён)#
                        Разобрался.
                        Хотел на hover менять opacity, но не работает с текущим механизмом.
                      2. kinoprorok
                        kinoprorok07 сентября 2016, 23:58(был изменён)#
                        Андрей, спасибо ) Еще раз помог
                        1. Andy Si09 сентября 2016, 17:40#
                          не за что, заходи если что)
                          1. Сергей
                            Сергей27 мая 2018, 22:01#
                            Здравствуйте!
                            Очень понравилось модальное окно с котом!!!
                            Не поделитесь скриптом?!
                            1. Andy Si27 мая 2018, 22:10#
                              Привет. Мне как-бы не жалко, но скинуть не могу по причине того что как-такового единого скрипта нет. Это набор jquery плагинов (glio,cookie,leanModal) и CSS стилей и как всё это подключить я просто описать не могу за 5 минут.
                        2. Комментарий был удален.
                          1. Andy Si25 сентября 2016, 20:32#
                            Вот, человек дело говорит. Проверяйте чтобы кнопка не наезжала на контент. Проверяйте на мобильниках. А то видите как бомбит у некоторых))
                          2. 123
                            12328 сентября 2016, 18:51#
                            Скжите, а как сделать, чтобы кнопка появлялась слева, а не справа
                            1. Andy Si28 сентября 2016, 21:33#
                              В стиле заменить right: 30px на left: 30px
                            2. Алиса
                              Алиса04 ноября 2016, 12:19#
                              Добрый день! У меня тоже проблема в том, что картинка не отображается, я написала текст в этом div чтобы проверить работает ли вообще и действительно функционал работает, но картинки нет. (Если я вывожу картинку непосредственно в этом div «между скобок» тоже работает)
                              но как указано у вас выше, почему то не срабатывает. Очень интересно почему так происходит?
                              если меняю на dispaly:block; то при первой загрузке я вижу текст, проблема как в этом комментарии «Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется.
                              Подскажите, пожалуйста, что не так.»
                              Было бы очень здорово если бы вы ответили, просто интересно почему так происходит.
                              1. Andy Si04 ноября 2016, 13:04#
                                Привет. Мне тоже интересно почему не срабатывает у вас. Пришли адрес страницы где не работает кнопка наверх — я сегодня отвечу в чём причина. Можешь прислать на эл. почту (внизу сайта указана) если не хочется адрес сайта писать в комментариях.
                              2. leongur
                                leongur29 ноября 2016, 19:10#
                                Подскажите пожалуйста, как сделать ещё кнопку ВНИЗ
                                1. Andy Si29 ноября 2016, 19:39(был изменён)#
                                  Аналогичным образом, только везде меняем upbutton на bottombutton

                                  И изменить код:
                                  $(window).scroll(function() {
                                          if ($(this).scrollTop() < $(document).height()-100) {
                                              if ($('#bottombutton').is(':hidden')) {
                                                  $('#bottombutton').css({opacity : 1}).fadeIn('slow');
                                              }
                                          } else { $('#bottombutton').stop(true, false).fadeOut('fast'); }
                                      });
                                      $('#bottombutton').click(function() {
                                          $('html, body').stop().animate({scrollTop : $(document).height()}, 300);
                                      });
                                  
                                  Только одновременно это нельзя использовать вместе с кнопкой наверх. Чтоб и то и то было, надо переписывать всё. В комментарии не выложу.
                                2. Inna
                                  Inna30 ноября 2016, 20:48#
                                  Класс, спасибо большое
                                  1. Vladimir
                                    Vladimir22 декабря 2016, 15:39#
                                    Подскажите люди добрые, как сделать эту кнопку чтобы она не до шапки доезжала а до меню?
                                    1. Andy Si22 декабря 2016, 16:10#
                                      В строчке когда меняй ноль на высоту, где расположено меню… 200 например:
                                      $('html, body').stop().animate({scrollTop : 200}, 300);
                                    2. Vladimir
                                      Vladimir22 декабря 2016, 16:39#
                                      Сенкью вери матч
                                      1. Vladimir
                                        Vladimir22 декабря 2016, 20:18#
                                        А еще не подскажешь как мне https://gyazo.com/2d894009416b78558bd72bd9f666ac5d сделать отступ?(там где красным, так чтоб я страницу полностью видел) вообще не получается
                                        1. Andy Si23 декабря 2016, 09:50#
                                          По скриншоту не могу определить в чём проблема.
                                          1. Vladimir
                                            Vladimir23 декабря 2016, 10:26#
                                            Я разобрался с этим, Помогите мне как убрать отступ от меню до шапки чтобы меню было вплотную с шапкой https://gyazo.com/3fb74143fa5f898baa998db627c4fbe9
                                            1. Andy Si24 декабря 2016, 10:36#
                                              Я по скриншотам CSS стили смотреть не могу. Смотри позиционирование элементов, margin, padding у элементов.
                                              1. Vladimir
                                                Vladimir24 декабря 2016, 15:52#
                                                Я все пробовал, там где должно быть нечего не происходит
                                        2. Павел
                                          Павел02 февраля 2017, 09:37#
                                          Круто, спасибо! Люблю, когда объясняется все так легко и просто. А то на некоторых сайтах такие инструкции, что хоть в петлю полезай :)
                                          1. Павел
                                            Павел02 февраля 2017, 09:38#
                                            Круто, спасибо! Люблю, когда все так легко и просто объясняется. А то на некоторых сайтах такие инструкции, что хоть в петлю полезай :)
                                            1. Алексей
                                              Алексей14 марта 2017, 11:28#
                                              От всей души благодарю.
                                              ! У Вас на сайте кнопка вверх немного обрезана справа, т.к. в стилях css указаны
                                              height: 60px;
                                              width: 60px;

                                              а не 61 и 63
                                              1. Andy Si15 марта 2017, 19:53#
                                                Да, верно заметили. Спасибо.
                                              2. Никита
                                                Никита16 марта 2017, 10:33#
                                                Спасибо большое! Всё получилось, только вот в Яндекс браузере почему то совсем не хочет отображаться. Не подскажете в чём дело может быть?
                                                1. Дмитрий KFS
                                                  Дмитрий KFS16 марта 2017, 22:58#
                                                  Огромное спасибо! Работает!
                                                  1. Андрей
                                                    Андрей10 апреля 2017, 21:48#
                                                    Спасибо!
                                                    1. Андрей
                                                      Андрей10 апреля 2017, 21:48#
                                                      Спасибо!
                                                      1. Александр
                                                        Александр27 сентября 2017, 08:22#
                                                        Самое классное — так это то, что с других сайтов код не работал, хоть тресни, а здесь сразу все встало на свои места и заработало. Спасибо автору!
                                                        1. ivan plysyuk
                                                          ivan plysyuk07 ноября 2017, 17:31#
                                                          Привет! можешь скрип таймера написать Пример — таймер должен быть 40 секунд, запускатся должен как пользователь зашол на страницу автоматом. А по истечению 40 секунд загорается примеру число 1232?
                                                          1. Andy Si07 ноября 2017, 20:58(был изменён)#
                                                            Я писал про таймер в другой статье и там есть готовый код.
                                                          2. CybShot
                                                            CybShot18 ноября 2017, 23:56#
                                                            Здравствуйте. Я столкнулся с такой проблемой:
                                                            при загрузке страницы кнопка уже есть (ее быть не должно), а при дальнейшем скролле она пропадает (ее и не должно было быть), но через какое-то количество пикселей появляется вновь (когда и должна). Как отключить ее первичную прогрузку? Или это нормальная работа данного скрипта?
                                                            1. Andy Si19 ноября 2017, 11:52#
                                                              Добрй день. Нет, изначально кнопка не должна отображаться. За это отвечает CSS стиль:
                                                              #upbutton { display: none; }
                                                              Либо уже существующие стили его переопределяют, либо этот стиль по каким-то причинам не применяется к кнопке.
                                                              1. CybShot
                                                                CybShot19 ноября 2017, 13:16#
                                                                Большое спасибо
                                                            2. Алексей
                                                              Алексей17 декабря 2017, 03:16(был изменён)#
                                                              Добрый день!

                                                              Подскажите, пожалуйста, в чем может быть проблема?

                                                              Есть тестовая страница: http://nasledniki.narod.ru/skal/Pik-Porozhisty2.htm

                                                              Вначале добавил кнопку «Вверх» как в Вашем примере. Отрабатывала нормально.
                                                              Потом добавил скрипт Fancybox для удобного просмотра фотографий. И тут начались проблемы:
                                                              1) если кнопка «Вверх» не появилась, и начать просмотр фото, то после выхода из просмотра кнопка «Вверх» не появляется
                                                              2) если кнопка «Вверх» появилась, и начать просмотр фото, то после выхода из просмотра кнопка «Вверх» остается навсегда.

                                                              <script src="../fancybox/jquery-1.7.2.min.js" type="text/javascript">
                                                              
                                                              <!--Кнопка-->
                                                              </script>
                                                              	<link rel="stylesheet" href="../CSS/scrollup.css">	
                                                              	<script type="text/javascript">
                                                              		$(document).ready(function(){
                                                               			$(window).scroll(function(){
                                                              				if ($(this).scrollTop() > 100) {
                                                              					$('.scrollup').fadeIn();
                                                              				} else {
                                                              					$('.scrollup').fadeOut();
                                                              				}
                                                              			});
                                                               
                                                              			$('.scrollup').click(function(){
                                                              				$("html, body").animate({ scrollTop: 0 }, 0); 
                                                              				return false;
                                                              			});
                                                               
                                                              		});
                                                              	</script> 
                                                              
                                                              <!--Просмотр фото-->
                                                              	<link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox.css">
                                                              	<!--<script type="text/javascript" src="../fancybox/jquery.easing.1.3.js"></script>-->
                                                              	<script type="text/javascript" src="../fancybox/jquery.fancybox-1.2.1.pack.js"></script>
                                                              	<script type="text/javascript">
                                                              		$(document).ready(function() { 
                                                              			$("a.first").fancybox(); 
                                                              			$("a.two").fancybox(); 
                                                              		});
                                                              	</script> 
                                                              
                                                              
                                                              1. Andy Si17 декабря 2017, 12:21#
                                                                Я рекомендую обновить библиотеку jquery и fancybox. У вас на сайте и то и то устаревшее — могут быть в них баги. jquery последняя версия 3.2.1 — у вас 1.7.2, а fancybox 3.2.5 — у вас 1.2.1.

                                                                Скачайте с официальных сайтов:
                                                                http://fancyapps.com/fancybox/3/
                                                                https://jquery.com/download/
                                                                1. Алексей
                                                                  Алексей17 декабря 2017, 14:29#
                                                                  Большое спасибо!

                                                                  Помогло обновление библиотек.

                                                                  Вот страница после изменений, если кому интересно)
                                                                  http://nasledniki.narod.ru/skal/Pik-Porozhisty.htm
                                                                2. Andy Si17 декабря 2017, 12:24(был изменён)#
                                                                  Еще как вариант, можете попробовать заменить fancybox на Colorbox.
                                                                3. Андрей
                                                                  Андрей12 февраля 2018, 23:09#
                                                                  Здравствуйте!
                                                                  Я испробовал разные варианты установки кнопки. Но почему-то ни один не работает. В итоге остановился на первом вашем варианте. Подскажите, что я сделал не так. Страница размещения: https://avkzarabotok.info/aforex.html. Путь обращения к рисунку написан корректно. Заранее благодарен.
                                                                  1. Andy Si13 февраля 2018, 09:20#
                                                                    Добрый день.
                                                                    Без доменного имени указывай путь к изображению в стилях. Просто: /images/arrow-up.png
                                                                    1. Андрей
                                                                      Андрей13 февраля 2018, 17:35#
                                                                      Я убрал доменное имя, ничего не изменилось. Кнопка так и не появилась.
                                                                      1. Andy Si13 февраля 2018, 17:42#
                                                                        всё изменилось, просто про сброс кеша браузера надо не забывать после правок стилей — ctrl + f5
                                                                        1. Андрей
                                                                          Андрей13 февраля 2018, 19:25#
                                                                          Да, кнопка появилась. Но при нажатии на нее ничего не происходит.
                                                                          1. Andy Si13 февраля 2018, 22:48(был изменён)#
                                                                            Ну да, оберни код в это, может поможет.
                                                                            $(function(){ 
                                                                            // сюда весь javascript код с сайта
                                                                            });
                                                                            1. Андрей
                                                                              Андрей14 февраля 2018, 17:44#
                                                                              Спасибо за помощь, кнопка заработала.
                                                                  2. dsad
                                                                    dsad11 марта 2018, 19:58(был изменён)#
                                                                    Вот еще рабочий варик
                                                                    <a class="dwqdwqd" onclick="$('html, body').animate({scrollTop:0},400)">Подняться наверх</a>
                                                                    1. Andy Si12 марта 2018, 09:55#
                                                                      Как вариант, только это без скрытия, если прокрутки не было.
                                                                    2. Olga
                                                                      Olga14 марта 2018, 18:37#
                                                                      Здравствуйте!

                                                                      Вы не подскажете, почему у меня не работает Java Script функция #scrollToTop? Адрес сайта: http://jojoanca-jubilee.com.
                                                                      Заранее спасибо!
                                                                      1. Andy Si14 марта 2018, 19:29#
                                                                        Там много причин почему может не работать. Во-первых, вёрстку надо поправить, нет закрывающейся кавычки:
                                                                        <section id="slider" class="carousel slide container" data-ride="carousel>
                                                                        Во-вторых, библиотеку jquery.min.js подключите до подключения других скриптов. А потом уже дальше надо будет смотреть что может быть не так.
                                                                        1. Olga
                                                                          Olga15 марта 2018, 11:30#
                                                                          Я сделала те изменения, о которых вы написали, но пока эта функция все ещё не работает.
                                                                          1. Andy Si15 марта 2018, 15:04#
                                                                            Теперь в файле template.js ругается на скрипт. Это какой-то плагин видимо, который не подключен:
                                                                            $("#story.panel-body").mCustomScrollbar({
                                                                            	theme:"default"
                                                                            });
                                                                            1. Olga
                                                                              Olga17 марта 2018, 01:38#
                                                                              Здравствуйте, Андрей!

                                                                              Вроде бы я подключила этот плагин, но функция пока не работает. Скажите пожалуйста, а какой tool вы используете, чтобы увидеть на что js-скрипт ругается?
                                                                              1. Andy Si17 марта 2018, 10:24#
                                                                                Добрый день. Обычная консоль баузера. Shift+Ctrl+I в Firefox вызывается. В других браузерах может по другому. Там вообще полно косяков в скиптах, он теперь на другие строчки ругается.
                                                                      2. Анастасия
                                                                        Анастасия14 мая 2018, 21:39(был изменён)#
                                                                        Здравствуйте!
                                                                        Я написала этот код, всё работает, подскажите только, как сделать чтобы вначале страницы кнопка исчезала???
                                                                        Заранее спасибо
                                                                        1. Andy Si15 мая 2018, 10:16#
                                                                          Добрый день. Надо, вставляемый в комментарии код, обрамлять тегом
                                                                          code
                                                                          Сейчас я не могу увидеть что вы написали. Возьмите пример лучше из статьи, там она исчезает.
                                                                        2. AGr0
                                                                          AGr003 июня 2018, 06:16(был изменён)#
                                                                          Вариант без jQuery великолепно и плавно скроллит вверх, вот только если кнопка видна всегда, потому что если display:none то ее вовсе не видно. Как побороть? Где-то обработку скролла надо прилепить…
                                                                          А вместо картинки вполне симпотно выглялит: ⏫
                                                                          <div id="upbutton" href="#" onclick="smoothJumpUp(); return false;">&#9195;</div>
                                                                          
                                                                          1. Andy Si03 июня 2018, 09:48#
                                                                            Добавил в статью обработчик. Смотри там где вариант без jQuery.
                                                                          2. Aleksey
                                                                            Aleksey22 октября 2018, 10:08#
                                                                            Поставил скрипт на свой сайт ws.averzin.ru и к сожалению, кнопка есть. А наверх не листается. В чем может быть проблема?
                                                                            1. Andy Si22 октября 2018, 10:32(был изменён)#
                                                                              В файле стилей css/demo.css удали ;l:
                                                                              html, body {
                                                                                overflow-x: hidden;
                                                                              }
                                                                              Всё заработает. Или из этого правила удали просто html, для body оставь.
                                                                              1. Aleksei
                                                                                Aleksei22 октября 2018, 13:52#
                                                                                Simkin Andrew
                                                                                Беглый взгляд на сайт, после удаления html, показывает что все осталось как и прежде… и кнопка заработала!

                                                                                Спасибо!
                                                                            2. Оксана
                                                                              Оксана07 апреля 2019, 23:51#
                                                                              Большое спасибо за код. Всё заработало с первого раза.
                                                                              1. Захар
                                                                                Захар31 июля 2019, 07:30#
                                                                                Добрый день.
                                                                                Применил на сайте второй вариант. Все отлично заработало и работало. Но неожиданно возникла следующая проблема. При нажатии на кнопку прокрутка стала супермедленная, очень тормозит. С чем это связано, пока не могу понять. Подскажите, пожалуйста, что можно изменить в коде, чтобы прокрутка стала не плавной, а быстрой. Спасибо.
                                                                                1. Andy Si31 июля 2019, 08:46#
                                                                                  Привет. Второй вариант это который без jquery? Там за скорость прокрутки отвечает строка
                                                                                  setTimeout(smoothJumpUp, 20);
                                                                                  но есть подозрение что дело в чем-то другом. Без отладки не могу предположить в чем дело. Надо смотреть браузерную консоль.
                                                                                2. Захар
                                                                                  Захар31 июля 2019, 11:09#
                                                                                  Да, без jquery. Сайт https://bittehremont-vrn.ru
                                                                                  1. Andy Si31 июля 2019, 11:20#
                                                                                    Замени функцию, там только две цифры изменил:
                                                                                    var smoothJumpUp = function() {
                                                                                            if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
                                                                                                window.scrollBy(0,-500);
                                                                                                setTimeout(smoothJumpUp, 10);
                                                                                            }
                                                                                        }
                                                                                    
                                                                                    будет быстрее намного
                                                                                    1. Захар
                                                                                      Захар31 июля 2019, 11:58#
                                                                                      Странно, но особо ничего не изменилось, особенно в мобильной версии вообще не движется. А чтобы совсем плавной прокрутки не было, что нужно изменить в скрипте?
                                                                                      1. Andy Si31 июля 2019, 16:03#
                                                                                        Я вбивал этот код прямо на вашем сайте через браузерную консоль, всё работало быстро. Попробуй способ с jQuery.

                                                                                        Чтобы моментально наверх перейти, можно обойтись вообще без скриптов — обычная ссылка на страницу и решетка в конце адреса:
                                                                                        <a href="/saytostroy/button-top.html#">Быстро наверх</a>
                                                                                        1. Захар
                                                                                          Захар31 июля 2019, 18:02#
                                                                                          Спасибо за советы, буду пробовать все варианты.
                                                                                    2. Прохожий
                                                                                      Прохожий06 октября 2020, 07:18(был изменён)#
                                                                                      Захар, уволь своего дизайнера… или найми его…
                                                                                      Сайт — вырви глаз, привет 90-е
                                                                                    3. Наталья
                                                                                      Наталья16 октября 2019, 13:33#
                                                                                      Здравствуйте! Сайт на ModX. Вставила ваш код — на Главной есть кнопка «Вверх», а на других страницах не отображается. Вставляла код и в шаблоны этих страниц в зону head — не работает. Помогите, пожалуйста. Сайт https://www.centr-alians.ru/experts/
                                                                                      1. Andy Si16 октября 2019, 13:39#
                                                                                        Добрый день. В стилях путь к кнопке относительный, поэтому и не отображается на внутренних страницах.
                                                                                        #upbutton {
                                                                                            background: url("/assets/templates/alians/css/up2.png") no-repeat top right;
                                                                                        ...
                                                                                        
                                                                                        Слеш в начале пути нужен.
                                                                                        1. Наталья
                                                                                          Наталья16 октября 2019, 14:36#
                                                                                          Благодарю за быстрый ответ! разобралась, заработало
                                                                                      2. Ксения
                                                                                        Ксения21 октября 2019, 19:54#
                                                                                        Здравствуйте! Воспользовалась вашим скриптом, он работает. Но вместо картинки отображаются полупрозрачные квадраты. При нажатии — возвращает на верх, но как отобразить свою картинку? Адрес проверяла. Подскажите, пожалуйста, что может быть не так.
                                                                                        1. Andy Si22 октября 2019, 09:21(был изменён)#
                                                                                          Добрый день. Это смотреть надо. Скорее всего, проблема в стилях или путь к изображению кнопки всё же неверный.
                                                                                        2. Григорий
                                                                                          Григорий04 ноября 2019, 00:44#
                                                                                          Здравствуйте! Вставил кнопку, все работает, но она какая-то перекосаная в левую сторону, есть решение? Картинку 6 раз менял, не знаю что уже делать
                                                                                          1. Andy Si04 ноября 2019, 12:08(был изменён)#
                                                                                            Добрый день. Значит стили какие-то к ней дополнительно применяются по трансформации. Ищи стили, которые её перекашивают.
                                                                                          2. Тимур Уваровит
                                                                                            Тимур Уваровит11 марта 2020, 19:17#
                                                                                            Доброго вечера. Кто поможет вставить на этот сайт www.cleng.club такую кнопку? Заплачу деньги.
                                                                                            1. Andy Si12 марта 2020, 09:47#
                                                                                              К выходным если сам не сделаешь, напиши на email, который внизу сайта указан. Скинь доступы, посмотрю, можно ли туда вставить такую кнопку.
                                                                                            2. konsttine
                                                                                              konsttine19 мая 2020, 01:53#
                                                                                              Спасибо большое за код!
                                                                                              Установил, всё работает, но при просмотре сайта со смартфона, кнопка не отображается. Подскажите, в чем может быть проблема?
                                                                                              kapitosha-club.ru
                                                                                              1. Andy Si19 мая 2020, 08:40#
                                                                                                Я бы подсказал, но для этого надо посмотреть как всё размещено на сайте. Сейчас кнопки там нет. Скорее всего, что-то со стилями сайта. А вообще, на мобильной версии часто скрывают кнопку, чтобы она не перекрывала содержимое.
                                                                                                1. АгроСемка
                                                                                                  АгроСемка12 ноября 2020, 15:55#
                                                                                                  А как Вы сделали чтобы при наведении на кнопку она становится ярче (активна)?
                                                                                                  1. Andy Si12 ноября 2020, 16:13#
                                                                                                    Это делается с помощью CSS стилей. Замени свои стили на эти:
                                                                                                    #upbutton {
                                                                                                        background: url("/design/default_2/images/up2.png") no-repeat top left;
                                                                                                        height: 60px;
                                                                                                        width: 60px;
                                                                                                        bottom: 30px;
                                                                                                        right: 50px;
                                                                                                        cursor: pointer;
                                                                                                        display: none;
                                                                                                        position: fixed;
                                                                                                        z-index: 999;
                                                                                                        opacity: 0.8;
                                                                                                    }
                                                                                                    #upbutton:hover {
                                                                                                        opacity: 1;
                                                                                                    }
                                                                                                    
                                                                                                    1. АгроСемка
                                                                                                      АгроСемка12 ноября 2020, 16:30#
                                                                                                      Получилось! Спасибо!
                                                                                                2. АгроСемка
                                                                                                  АгроСемка12 ноября 2020, 15:53#
                                                                                                  Огромное спасибо. Установил без всяких проблем. Всё работает отлично. Результат можете увидеть на моём сайте — agrosemka.com Сначала не заработало, т.к. забыл скачать и добавить картинку и указать нужный путь к ней, но как это сделал сразу же всё заработало! Спасибо автору статьи!!! Я очень давно искал рабочий код, который заработает на Simpla.
                                                                                                  1. Andy Si12 ноября 2020, 16:07#
                                                                                                    Отлично, я бы только сделал скорость прокрутки побыстрее.
                                                                                                    setTimeout(smoothJumpUp, 20);
                                                                                                    20 попробуйте поменять на 10.
                                                                                                    1. АгроСемка
                                                                                                      АгроСемка12 ноября 2020, 16:26#
                                                                                                      Поставил на 5. Стало вообще супер по моему мнению. Спасибо.
                                                                                                  © REALADMIN.RU   2020 г.
                                                                                                  Страница сгенерирована: 0,1159 s | 6 mb.
                                                                                                  На каком уровне Вы играете в шахматы?
                                                                                                  О П Р О С