RealAdmin.ru

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

JavaScript,jQuery,CSS,Веб-дизайн
Категория: Сайтострой
18 окт. 2014 г.

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

Шаги:

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

Подключаем 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 type="text/javascript">
    window.onload = function () {
    //здесь скрипт
    }
</script>

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

Посмотрите похожее — 6
Комментарии —
  1. Razor10 апреля 2015, 18:11#
    На Java работает, но вот картинка не отображается, по всякому пробовал.
    1. Razor10 апреля 2015, 19:48#
      В wordpress втулил это дело в подвал и на dispaly:block; поменял в стилях. «Изображение» в ссылки пишет, а саму картинку не отображает. Такие дела.
      1. Simkin Andrew11 апреля 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. Simkin Andrew21 апреля 2016, 09:24#
                Код не на всех страницах размещён. jQuery не на всех страницах подключена. Ошибки в других скриптах мешают выполнению нижележащего javascript кода. Вот основные причины.
                1. Наталья09 февраля 2018, 18:23#
                  Здравствуйте у меня тоже кнопка отображается только на 1 стр.
                  http://ao-constar.com.ua/produkciya.php
                  на др. нет
                  1. Simkin Andrew11 февраля 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. Simkin Andrew18 мая 2016, 15:38#
                    В каком стиле? Вместо div поставить a и поставить соответствующую ссылку на главную страницу.
                  2. Комментарий был удален.
                    1. steve300912 июня 2016, 20:17(был изменён)#
                      Привет.
                      Спасибо за кнопку. Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется.
                      Подскажите, пожалуйста, что не так.
                      1. steve300912 июня 2016, 20:25(был изменён)#
                        Разобрался.
                        Хотел на hover менять opacity, но не работает с текущим механизмом.
                      2. kinoprorok07 сентября 2016, 23:58(был изменён)#
                        Андрей, спасибо ) Еще раз помог
                        1. Simkin Andrew09 сентября 2016, 17:40#
                          не за что, заходи если что)
                          1. Сергей27 мая 2018, 22:01#
                            Здравствуйте!
                            Очень понравилось модальное окно с котом!!!
                            Не поделитесь скриптом?!
                            1. Simkin Andrew27 мая 2018, 22:10#
                              Привет. Мне как-бы не жалко, но скинуть не могу по причине того что как-такового единого скрипта нет. Это набор jquery плагинов (glio,cookie,leanModal) и CSS стилей и как всё это подключить я просто описать не могу за 5 минут.
                        2. Достали!25 сентября 2016, 17:24#
                          ДЕБИЛЫ!!! ПРЕКРАТИТЕ ПИХАТЬ ЭТИ КНОПКИ НА КАЖДЫЙ САЙТ!!! Я УЖЕ ЗАКОЛЕБАЛСЯ ИХ УДАЛЯТЬ ЧЕРЕЗ АДБОЛК!!! ЕСЛИ МНЕ НАДО, Я СПОКОЙНО МОГУ НАЖАТЬ КНОПКУ HOME ИЛИ КЛИКНУТЬ ПО ПОЛОСЕ ПРОКРУТКИ!!! А ВАШИ КНОПКИ «ВВЕРХ» ПРЕДНАЗНАЧЕНЫ ДЛЯ КОГО? ДЛЯ ДЕБИЛОВ? НО ВЕДЬ ОНИ ЗАКРЫВАЮТ ЧАСТЬ ТЕКСТА ПРЯМО ПОСЕРЕДИНЕ СТРАНИЦЫ И МЕШАЮТ ЧИТАТЬ!!! ЕСЛИ ЛЮДЯМ БУДУТ НУЖНЫЕ ТАКИЕ КНОПКИ, ЭТО БУДЕТ ВСТРОЕНО В БРАУЗЕР! ПОНЯТНО ВАМ, ДЕБИЛЫ?!!!
                          1. Simkin Andrew25 сентября 2016, 20:32#
                            Вот, человек дело говорит. Проверяйте чтобы кнопка не наезжала на контент. Проверяйте на мобильниках. А то видите как бомбит у некоторых))
                          2. 12328 сентября 2016, 18:51#
                            Скжите, а как сделать, чтобы кнопка появлялась слева, а не справа
                            1. Simkin Andrew28 сентября 2016, 21:33#
                              В стиле заменить right: 30px на left: 30px
                            2. Алиса04 ноября 2016, 12:19#
                              Добрый день! У меня тоже проблема в том, что картинка не отображается, я написала текст в этом div чтобы проверить работает ли вообще и действительно функционал работает, но картинки нет. (Если я вывожу картинку непосредственно в этом div «между скобок» тоже работает)
                              но как указано у вас выше, почему то не срабатывает. Очень интересно почему так происходит?
                              если меняю на dispaly:block; то при первой загрузке я вижу текст, проблема как в этом комментарии «Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется.
                              Подскажите, пожалуйста, что не так.»
                              Было бы очень здорово если бы вы ответили, просто интересно почему так происходит.
                              1. Simkin Andrew04 ноября 2016, 13:04#
                                Привет. Мне тоже интересно почему не срабатывает у вас. Пришли адрес страницы где не работает кнопка наверх — я сегодня отвечу в чём причина. Можешь прислать на эл. почту (внизу сайта указана) если не хочется адрес сайта писать в комментариях.
                              2. leongur29 ноября 2016, 19:10#
                                Подскажите пожалуйста, как сделать ещё кнопку ВНИЗ
                                1. Simkin Andrew29 ноября 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. Simkin Andrew22 декабря 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. Simkin Andrew23 декабря 2016, 09:50#
                                          По скриншоту не могу определить в чём проблема.
                                          1. Vladimir23 декабря 2016, 10:26#
                                            Я разобрался с этим, Помогите мне как убрать отступ от меню до шапки чтобы меню было вплотную с шапкой https://gyazo.com/3fb74143fa5f898baa998db627c4fbe9
                                            1. Simkin Andrew24 декабря 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. Simkin Andrew15 марта 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. Simkin Andrew07 ноября 2017, 20:58#
                                                            Я писал про таймер в другой статье и там есть готовый код: — Кнопка таймер
                                                          2. CybShot18 ноября 2017, 23:56#
                                                            Здравствуйте. Я столкнулся с такой проблемой:
                                                            при загрузке страницы кнопка уже есть (ее быть не должно), а при дальнейшем скролле она пропадает (ее и не должно было быть), но через какое-то количество пикселей появляется вновь (когда и должна). Как отключить ее первичную прогрузку? Или это нормальная работа данного скрипта?
                                                            1. Simkin Andrew19 ноября 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. Simkin Andrew17 декабря 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. Simkin Andrew17 декабря 2017, 12:24#
                                                                  Еще как вариант, можете попробовать заменить fancybox на Colorbox.
                                                                3. Андрей12 февраля 2018, 23:09#
                                                                  Здравствуйте!
                                                                  Я испробовал разные варианты установки кнопки. Но почему-то ни один не работает. В итоге остановился на первом вашем варианте. Подскажите, что я сделал не так. Страница размещения: https://avkzarabotok.info/aforex.html. Путь обращения к рисунку написан корректно. Заранее благодарен.
                                                                  1. Simkin Andrew13 февраля 2018, 09:20#
                                                                    Добрый день.
                                                                    Без доменного имени указывай путь к изображению в стилях. Просто: /images/arrow-up.png
                                                                    1. Андрей13 февраля 2018, 17:35#
                                                                      Я убрал доменное имя, ничего не изменилось. Кнопка так и не появилась.
                                                                      1. Simkin Andrew13 февраля 2018, 17:42#
                                                                        всё изменилось, просто про сброс кеша браузера надо не забывать после правок стилей — ctrl + f5
                                                                        1. Андрей13 февраля 2018, 19:25#
                                                                          Да, кнопка появилась. Но при нажатии на нее ничего не происходит.
                                                                          1. Simkin Andrew13 февраля 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. Simkin Andrew12 марта 2018, 09:55#
                                                                      Как вариант, только это без скрытия, если прокрутки не было.
                                                                    2. Olga14 марта 2018, 18:37#
                                                                      Здравствуйте!

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

                                                                              Вроде бы я подключила этот плагин, но функция пока не работает. Скажите пожалуйста, а какой tool вы используете, чтобы увидеть на что js-скрипт ругается?
                                                                              1. Simkin Andrew17 марта 2018, 10:24#
                                                                                Добрый день. Обычная консоль баузера. Shift+Ctrl+I в Firefox вызывается. В других браузерах может по другому. Там вообще полно косяков в скиптах, он теперь на другие строчки ругается.
                                                                      2. Анастасия14 мая 2018, 21:39(был изменён)#
                                                                        Здравствуйте!
                                                                        Я написала этот код, всё работает, подскажите только, как сделать чтобы вначале страницы кнопка исчезала???
                                                                        Заранее спасибо
                                                                        1. Simkin Andrew15 мая 2018, 10:16#
                                                                          Добрый день. Надо, вставляемый в комментарии код, обрамлять тегом
                                                                          code
                                                                          Сейчас я не могу увидеть что вы написали. Возьмите пример лучше из статьи, там она исчезает.
                                                                        2. AGr003 июня 2018, 06:16(был изменён)#
                                                                          Вариант без jQuery великолепно и плавно скроллит вверх, вот только если кнопка видна всегда, потому что если display:none то ее вовсе не видно. Как побороть? Где-то обработку скролла надо прилепить…
                                                                          А вместо картинки вполне симпотно выглялит: ⏫
                                                                          <div id="upbutton" href="#" onclick="smoothJumpUp(); return false;">&#9195;</div>
                                                                          
                                                                          1. Simkin Andrew03 июня 2018, 09:48#
                                                                            Добавил в статью обработчик. Смотри там где вариант без jQuery.
                                                                          2. Aleksey22 октября 2018, 10:08#
                                                                            Поставил скрипт на свой сайт ws.averzin.ru и к сожалению, кнопка есть. А наверх не листается. В чем может быть проблема?
                                                                            1. Simkin Andrew22 октября 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#
                                                                              Большое спасибо за код. Всё заработало с первого раза.
                                                                              © REALADMIN.RU   2019 г.
                                                                              Страница сгенерирована: 0,1678 s | 6 mb.
                                                                              На каком уровне Вы играете в шахматы?
                                                                              О П Р О С
                                                                              Home Question Top