RealAdmin.ru

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

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

Рассмотрим простой способ создания кнопки «наверх» для сайта, которая будет появляться при прокрутке страницы вниз. Разберем возможность реализации на чистом 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).scroll(function() {
        if ($(this).scrollTop() > 100) {
            if ($('#upbutton').is(':hidden')) {
                $('#upbutton').css({opacity : 1}).fadeIn('slow');
            }
        } else { $('#upbutton').stop(true, false).fadeOut('fast'); }
    });
    $('#upbutton').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>

Пример должен работать в большинстве случаев, но на некоторых движках могут возникнуть проблемы. Например, «Joomla» использует framework «Mootools», который часто конфликтует с jQuery. В таком случае можно воспользоваться упрощённой плавающей кнопкой «наверх».

Как сделать кнопку «наверх» без jQuery

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

<script>
    var smoothJumpUp = function() {
        if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
            window.scrollBy(0,-50);
            setTimeout(smoothJumpUp, 20);
        }
    }
    
    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>

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

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

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

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

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

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

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

Посмотрите похожее — 6
Комментарии —
  1. Razor10 апреля 2015, 18:11#
    На Java работает, но вот картинка не отображается, по всякому пробовал.
    1. 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. 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. steve300912 июня 2016, 20:17(был изменён)#
                      Привет.
                      Спасибо за кнопку. Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется.
                      Подскажите, пожалуйста, что не так.
                      1. steve300912 июня 2016, 20:25(был изменён)#
                        Разобрался.
                        Хотел на hover менять opacity, но не работает с текущим механизмом.
                      2. 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. 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. 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. Inna30 ноября 2016, 20:48#
                                  Класс, спасибо большое
                                  1. Vladimir22 декабря 2016, 15:39#
                                    Подскажите люди добрые, как сделать эту кнопку чтобы она не до шапки доезжала а до меню?
                                    1. Andy Si22 декабря 2016, 16:10#
                                      В строчке когда меняй ноль на высоту, где расположено меню… 200 например:
                                      $('html, body').stop().animate({scrollTop : 200}, 300);
                                    2. Vladimir22 декабря 2016, 16:39#
                                      Сенкью вери матч
                                      1. Vladimir22 декабря 2016, 20:18#
                                        А еще не подскажешь как мне https://gyazo.com/2d894009416b78558bd72bd9f666ac5d сделать отступ?(там где красным, так чтоб я страницу полностью видел) вообще не получается
                                        1. Andy Si23 декабря 2016, 09:50#
                                          По скриншоту не могу определить в чём проблема.
                                          1. Vladimir23 декабря 2016, 10:26#
                                            Я разобрался с этим, Помогите мне как убрать отступ от меню до шапки чтобы меню было вплотную с шапкой https://gyazo.com/3fb74143fa5f898baa998db627c4fbe9
                                            1. Andy Si24 декабря 2016, 10:36#
                                              Я по скриншотам CSS стили смотреть не могу. Смотри позиционирование элементов, margin, padding у элементов.
                                              1. 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. Дмитрий KFS16 марта 2017, 22:58#
                                                  Огромное спасибо! Работает!
                                                  1. Андрей10 апреля 2017, 21:48#
                                                    Спасибо!
                                                    1. Андрей10 апреля 2017, 21:48#
                                                      Спасибо!
                                                      1. Александр27 сентября 2017, 08:22#
                                                        Самое классное — так это то, что с других сайтов код не работал, хоть тресни, а здесь сразу все встало на свои места и заработало. Спасибо автору!
                                                        1. ivan plysyuk07 ноября 2017, 17:31#
                                                          Привет! можешь скрип таймера написать Пример — таймер должен быть 40 секунд, запускатся должен как пользователь зашол на страницу автоматом. А по истечению 40 секунд загорается примеру число 1232?
                                                          1. Andy Si07 ноября 2017, 20:58(был изменён)#
                                                            Я писал про таймер в другой статье и там есть готовый код.
                                                          2. CybShot18 ноября 2017, 23:56#
                                                            Здравствуйте. Я столкнулся с такой проблемой:
                                                            при загрузке страницы кнопка уже есть (ее быть не должно), а при дальнейшем скролле она пропадает (ее и не должно было быть), но через какое-то количество пикселей появляется вновь (когда и должна). Как отключить ее первичную прогрузку? Или это нормальная работа данного скрипта?
                                                            1. Andy Si19 ноября 2017, 11:52#
                                                              Добрй день. Нет, изначально кнопка не должна отображаться. За это отвечает CSS стиль:
                                                              #upbutton { display: none; }
                                                              Либо уже существующие стили его переопределяют, либо этот стиль по каким-то причинам не применяется к кнопке.
                                                              1. 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. dsad11 марта 2018, 19:58(был изменён)#
                                                                    Вот еще рабочий варик
                                                                    <a class="dwqdwqd" onclick="$('html, body').animate({scrollTop:0},400)">Подняться наверх</a>
                                                                    1. Andy Si12 марта 2018, 09:55#
                                                                      Как вариант, только это без скрытия, если прокрутки не было.
                                                                    2. 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. Olga15 марта 2018, 11:30#
                                                                          Я сделала те изменения, о которых вы написали, но пока эта функция все ещё не работает.
                                                                          1. Andy Si15 марта 2018, 15:04#
                                                                            Теперь в файле template.js ругается на скрипт. Это какой-то плагин видимо, который не подключен:
                                                                            $("#story.panel-body").mCustomScrollbar({
                                                                            	theme:"default"
                                                                            });
                                                                            1. 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. 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. 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. 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. Наталья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#
                                                                                        Благодарю за быстрый ответ! разобралась, заработало
                                                                                    © REALADMIN.RU   2019 г.
                                                                                    Страница сгенерирована: 0,3477 s | 14 mb.
                                                                                    На каком уровне Вы играете в шахматы?
                                                                                    О П Р О С