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 без использования сторонних библиотек. Отличие в том, что она будет отображаться независимо от того, осуществлялась прокрутка страницы или нет. Поэтому стиль берём из предыдущего примера и заменяем свойство «display: none;» на «display: block;». Скрипт и код копируем в любое место шаблона.

<script>
    var smoothJumpUp = function() {
        if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
            window.scrollBy(0,-50);
            setTimeout(smoothJumpUp, 20);
        }
    }
</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 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 #
                                                    не за что, заходи если что)
                                                  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,2357 s | 12 mb.
                                                                      Верите, что Путин честно набрал 76,69% на выборах?
                                                                      О П Р О С
                                                                      Home Question Top