RealAdmin.ru

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

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

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

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

Подключаем jQuery. В блок «head» копируем скрипт, который будет загружать последнюю версию с сайта «Google».

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.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 использует фреймворк «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 и не конфликтует ли она с «Mootools» (актуально для Joomla). Всё в порядке? Тогда оберните скрипт в следующую конструкцию.

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

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

Посмотрите похожее — 6
Комментарии —
  1. avatar AGr0 03 июня 2018, 06:16(был изменён) #
    Вариант без jQuery великолепно и плавно скроллит вверх, вот только если кнопка видна всегда, потому что если display:none то ее вовсе не видно. Как побороть? Где-то обработку скролла надо прилепить…
    А вместо картинки вполне симпотно выглялит: ⏫
    <div id="upbutton" href="#" onclick="smoothJumpUp(); return false;">&#9195;</div>
    
    1. avatar Simkin Andrew 03 июня 2018, 09:48 #
      Добавил в статью обработчик. Смотри там где вариант без jQuery.
    2. avatar Анастасия 14 мая 2018, 21:39(был изменён) #
      Здравствуйте!
      я написала этот код:
      Top


      Всё работает, подскажите только, как сделать чтобы вначале страницы кнопка исчезала???
      Заранее спасибо
      1. avatar Simkin Andrew 15 мая 2018, 10:16 #
        Добрый день. Надо, вставляемый в комментарии код, обрамлять тегом
        code
        Сейчас я не могу увидеть что вы написали. Возьмите пример лучше из статьи, там она исчезает.
      2. avatar Olga 14 марта 2018, 18:37 #
        Здравствуйте!

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

                Вроде бы я подключила этот плагин, но функция пока не работает. Скажите пожалуйста, а какой tool вы используете, чтобы увидеть на что js-скрипт ругается?
                1. avatar Simkin Andrew 17 марта 2018, 10:24 #
                  Добрый день. Обычная консоль баузера. Shift+Ctrl+I в Firefox вызывается. В других браузерах может по другому. Там вообще полно косяков в скиптах, он теперь на другие строчки ругается.
        2. avatar dsad 11 марта 2018, 19:58(был изменён) #
          Вот еще рабочий варик
          <a class="dwqdwqd" onclick="$('html, body').animate({scrollTop:0},400)">Подняться наверх</a>
          1. avatar Simkin Andrew 12 марта 2018, 09:55 #
            Как вариант, только это без скрытия, если прокрутки не было.
          2. avatar Андрей 12 февраля 2018, 23:09 #
            Здравствуйте!
            Я испробовал разные варианты установки кнопки. Но почему-то ни один не работает. В итоге остановился на первом вашем варианте. Подскажите, что я сделал не так. Страница размещения: https://avkzarabotok.info/aforex.html. Путь обращения к рисунку написан корректно. Заранее благодарен.
            1. avatar Simkin Andrew 13 февраля 2018, 09:20 #
              Добрый день.
              Без доменного имени указывай путь к изображению в стилях. Просто: /images/arrow-up.png
              1. avatar Андрей 13 февраля 2018, 17:35 #
                Я убрал доменное имя, ничего не изменилось. Кнопка так и не появилась.
                1. avatar Simkin Andrew 13 февраля 2018, 17:42 #
                  всё изменилось, просто про сброс кеша браузера надо не забывать после правок стилей — ctrl + f5
                  1. avatar Андрей 13 февраля 2018, 19:25 #
                    Да, кнопка появилась. Но при нажатии на нее ничего не происходит.
                    1. avatar Simkin Andrew 13 февраля 2018, 22:48(был изменён) #
                      Ну да, оберни код в это, может поможет.
                      $(function(){ 
                      // сюда весь javascript код с сайта
                      });
                      1. avatar Андрей 14 февраля 2018, 17:44 #
                        Спасибо за помощь, кнопка заработала.
            2. avatar Алексей 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. avatar Simkin Andrew 17 декабря 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. avatar Алексей 17 декабря 2017, 14:29 #
                  Большое спасибо!

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

                  Вот страница после изменений, если кому интересно)
                  http://nasledniki.narod.ru/skal/Pik-Porozhisty.htm
                2. avatar Simkin Andrew 17 декабря 2017, 12:24 #
                  Еще как вариант, можете попробовать заменить fancybox на Colorbox.
                3. avatar CybShot 18 ноября 2017, 23:56 #
                  Здравствуйте. Я столкнулся с такой проблемой:
                  при загрузке страницы кнопка уже есть (ее быть не должно), а при дальнейшем скролле она пропадает (ее и не должно было быть), но через какое-то количество пикселей появляется вновь (когда и должна). Как отключить ее первичную прогрузку? Или это нормальная работа данного скрипта?
                  1. avatar Simkin Andrew 19 ноября 2017, 11:52 #
                    Добрй день. Нет, изначально кнопка не должна отображаться. За это отвечает CSS стиль:
                    #upbutton { display: none; }
                    Либо уже существующие стили его переопределяют, либо этот стиль по каким-то причинам не применяется к кнопке.
                    1. avatar CybShot 19 ноября 2017, 13:16 #
                      Большое спасибо
                  2. avatar ivan plysyuk 07 ноября 2017, 17:31 #
                    Привет! можешь скрип таймера написать Пример — таймер должен быть 40 секунд, запускатся должен как пользователь зашол на страницу автоматом. А по истечению 40 секунд загорается примеру число 1232?
                    1. avatar Simkin Andrew 07 ноября 2017, 20:58 #
                      Я писал про таймер в другой статье и там есть готовый код: — Кнопка таймер
                    2. avatar Александр 27 сентября 2017, 08:22 #
                      Самое классное — так это то, что с других сайтов код не работал, хоть тресни, а здесь сразу все встало на свои места и заработало. Спасибо автору!
                      1. avatar Андрей 10 апреля 2017, 21:48 #
                        Спасибо!
                        1. avatar Андрей 10 апреля 2017, 21:48 #
                          Спасибо!
                          1. avatar Дмитрий KFS 16 марта 2017, 22:58 #
                            Огромное спасибо! Работает!
                            1. avatar Никита 16 марта 2017, 10:33 #
                              Спасибо большое! Всё получилось, только вот в Яндекс браузере почему то совсем не хочет отображаться. Не подскажете в чём дело может быть?
                              1. avatar Алексей 14 марта 2017, 11:28 #
                                От всей души благодарю.
                                ! У Вас на сайте кнопка вверх немного обрезана справа, т.к. в стилях css указаны
                                height: 60px;
                                width: 60px;

                                а не 61 и 63
                                1. avatar Simkin Andrew 15 марта 2017, 19:53 #
                                  Да, верно заметили. Спасибо.
                                2. avatar Павел 02 февраля 2017, 09:38 #
                                  Круто, спасибо! Люблю, когда все так легко и просто объясняется. А то на некоторых сайтах такие инструкции, что хоть в петлю полезай :)
                                  1. avatar Павел 02 февраля 2017, 09:37 #
                                    Круто, спасибо! Люблю, когда объясняется все так легко и просто. А то на некоторых сайтах такие инструкции, что хоть в петлю полезай :)
                                    1. avatar Vladimir 22 декабря 2016, 20:18 #
                                      А еще не подскажешь как мне https://gyazo.com/2d894009416b78558bd72bd9f666ac5d сделать отступ?(там где красным, так чтоб я страницу полностью видел) вообще не получается
                                      1. avatar Simkin Andrew 23 декабря 2016, 09:50 #
                                        По скриншоту не могу определить в чём проблема.
                                        1. avatar Vladimir 23 декабря 2016, 10:26 #
                                          Я разобрался с этим, Помогите мне как убрать отступ от меню до шапки чтобы меню было вплотную с шапкой https://gyazo.com/3fb74143fa5f898baa998db627c4fbe9
                                          1. avatar Simkin Andrew 24 декабря 2016, 10:36 #
                                            Я по скриншотам CSS стили смотреть не могу. Смотри позиционирование элементов, margin, padding у элементов.
                                            1. avatar Vladimir 24 декабря 2016, 15:52 #
                                              Я все пробовал, там где должно быть нечего не происходит
                                      2. avatar Vladimir 22 декабря 2016, 16:39 #
                                        Сенкью вери матч
                                        1. avatar Vladimir 22 декабря 2016, 15:39 #
                                          Подскажите люди добрые, как сделать эту кнопку чтобы она не до шапки доезжала а до меню?
                                          1. avatar Simkin Andrew 22 декабря 2016, 16:10 #
                                            В строчке когда меняй ноль на высоту, где расположено меню… 200 например:
                                            $('html, body').stop().animate({scrollTop : 200}, 300);
                                          2. avatar Inna 30 ноября 2016, 20:48 #
                                            Класс, спасибо большое
                                            1. avatar leongur 29 ноября 2016, 19:10 #
                                              Подскажите пожалуйста, как сделать ещё кнопку ВНИЗ
                                              1. avatar Simkin Andrew 29 ноября 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. avatar Алиса 04 ноября 2016, 12:19 #
                                                Добрый день! У меня тоже проблема в том, что картинка не отображается, я написала текст в этом div чтобы проверить работает ли вообще и действительно функционал работает, но картинки нет. (Если я вывожу картинку непосредственно в этом div «между скобок» тоже работает)
                                                но как указано у вас выше, почему то не срабатывает. Очень интересно почему так происходит?
                                                если меняю на dispaly:block; то при первой загрузке я вижу текст, проблема как в этом комментарии «Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется.
                                                Подскажите, пожалуйста, что не так.»
                                                Было бы очень здорово если бы вы ответили, просто интересно почему так происходит.
                                                1. avatar Simkin Andrew 04 ноября 2016, 13:04 #
                                                  Привет. Мне тоже интересно почему не срабатывает у вас. Пришли адрес страницы где не работает кнопка наверх — я сегодня отвечу в чём причина. Можешь прислать на эл. почту (внизу сайта указана) если не хочется адрес сайта писать в комментариях.
                                                2. avatar 123 28 сентября 2016, 18:51 #
                                                  Скжите, а как сделать, чтобы кнопка появлялась слева, а не справа
                                                  1. avatar Simkin Andrew 28 сентября 2016, 21:33 #
                                                    В стиле заменить right: 30px на left: 30px
                                                  2. avatar Достали! 25 сентября 2016, 17:24 #
                                                    ДЕБИЛЫ!!! ПРЕКРАТИТЕ ПИХАТЬ ЭТИ КНОПКИ НА КАЖДЫЙ САЙТ!!! Я УЖЕ ЗАКОЛЕБАЛСЯ ИХ УДАЛЯТЬ ЧЕРЕЗ АДБОЛК!!! ЕСЛИ МНЕ НАДО, Я СПОКОЙНО МОГУ НАЖАТЬ КНОПКУ HOME ИЛИ КЛИКНУТЬ ПО ПОЛОСЕ ПРОКРУТКИ!!! А ВАШИ КНОПКИ «ВВЕРХ» ПРЕДНАЗНАЧЕНЫ ДЛЯ КОГО? ДЛЯ ДЕБИЛОВ? НО ВЕДЬ ОНИ ЗАКРЫВАЮТ ЧАСТЬ ТЕКСТА ПРЯМО ПОСЕРЕДИНЕ СТРАНИЦЫ И МЕШАЮТ ЧИТАТЬ!!! ЕСЛИ ЛЮДЯМ БУДУТ НУЖНЫЕ ТАКИЕ КНОПКИ, ЭТО БУДЕТ ВСТРОЕНО В БРАУЗЕР! ПОНЯТНО ВАМ, ДЕБИЛЫ?!!!
                                                    1. avatar Simkin Andrew 25 сентября 2016, 20:32 #
                                                      Вот, человек дело говорит. Проверяйте чтобы кнопка не наезжала на контент. Проверяйте на мобильниках. А то видите как бомбит у некоторых))
                                                    2. avatar kinoprorok 07 сентября 2016, 23:58(был изменён) #
                                                      Андрей, спасибо ) Еще раз помог
                                                      1. avatar Simkin Andrew 09 сентября 2016, 17:40 #
                                                        не за что, заходи если что)
                                                        1. avatar Сергей 27 мая 2018, 22:01 #
                                                          Здравствуйте!
                                                          Очень понравилось модальное окно с котом!!!
                                                          Не поделитесь скриптом?!
                                                          1. avatar Simkin Andrew 27 мая 2018, 22:10 #
                                                            Привет. Мне как-бы не жалко, но скинуть не могу по причине того что как-такового единого скрипта нет. Это набор jquery плагинов (glio,cookie,leanModal) и CSS стилей и как всё это подключить я просто описать не могу за 5 минут.
                                                      2. avatar steve3009 12 июня 2016, 20:17(был изменён) #
                                                        Привет.
                                                        Спасибо за кнопку. Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется.
                                                        Подскажите, пожалуйста, что не так.
                                                        1. avatar steve3009 12 июня 2016, 20:25(был изменён) #
                                                          Разобрался.
                                                          Хотел на hover менять opacity, но не работает с текущим механизмом.
                                                        2. Комментарий был удален.
                                                          1. avatar Максим 18 мая 2016, 12:09 #
                                                            А как сделать кнопку «На главную» в таком же стили при помощи javascript?
                                                            1. avatar Simkin Andrew 18 мая 2016, 15:38 #
                                                              В каком стиле? Вместо div поставить a и поставить соответствующую ссылку на главную страницу.
                                                            2. Комментарий был удален.
                                                              1. avatar Игорь 21 апреля 2016, 09:11 #
                                                                Здравствуйте. Кнопка отображается не на всех страницах сайта. Подскажите пожалуйста, что может быть? Очень нужно…
                                                                1. avatar Simkin Andrew 21 апреля 2016, 09:24 #
                                                                  Код не на всех страницах размещён. jQuery не на всех страницах подключена. Ошибки в других скриптах мешают выполнению нижележащего javascript кода. Вот основные причины.
                                                                  1. avatar Наталья 09 февраля 2018, 18:23 #
                                                                    Здравствуйте у меня тоже кнопка отображается только на 1 стр.
                                                                    http://ao-constar.com.ua/produkciya.php
                                                                    на др. нет
                                                                    1. avatar Simkin Andrew 11 февраля 2018, 18:56 #
                                                                      Наталья, у вас на странице http://ao-constar.com.ua/produkciya.php подлючена библиотека jquery, а на других — нет. Из-за этого не работает, добавляйте на все страницы:
                                                                      <script type="text/javascript" src="js/jquery.js"></script>
                                                                      1. avatar Наталья 12 февраля 2018, 12:03 #
                                                                        Спасибочки большое за подсказку, все работает.
                                                                2. avatar 0bush 11 февраля 2016, 13:56 #
                                                                  Супер. Спасибо.
                                                                  1. avatar А-лат 12 августа 2015, 17:16 #
                                                                    Живи вечно, чувак!
                                                                    1. Комментарий был удален.
                                                                      1. avatar Razor 10 апреля 2015, 19:48 #
                                                                        В wordpress втулил это дело в подвал и на dispaly:block; поменял в стилях. «Изображение» в ссылки пишет, а саму картинку не отображает. Такие дела.
                                                                        1. avatar Simkin Andrew 11 апреля 2015, 10:59 #
                                                                          Значит путь к изображению неправильно прописал. Скрипт был опробован уже сайтах на 10 как минимум, везде работал.
                                                                          1. avatar Вячеслав 30 июня 2017, 14:18 #
                                                                            Спасибо
                                                                            https://gosstandart.info/ все руки не доходили. вот поставил. мило смотрится, даже дизайн менять не стал пока. для мобильной версии сайта с длиннными текстами, вещь незаменимая! «Я СПОКОЙНО МОГУ НАЖАТЬ КНОПКУ HOME ИЛИ КЛИКНУТЬ ПО ПОЛОСЕ ПРОКРУТКИ!!!» ну ну… Так что ставим аккуратные прозрачные кнопочки, тестируем на полезность и не слушаем никого!
                                                                        2. avatar Razor 10 апреля 2015, 18:11 #
                                                                          На Java работает, но вот картинка не отображается, по всякому пробовал.
                                                                          © REALADMIN.RU   2018 г.
                                                                          Страница сгенерирована: 0,3500 s | 12 mb.
                                                                          На каком уровне Вы играете в шахматы?
                                                                          О П Р О С
                                                                          Home Question Top