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
Комментарии — 25
  1. avatar Razor 10 апреля 2015, 18:11 #
    На Java работает, но вот картинка не отображается, по всякому пробовал.
    1. avatar Razor 10 апреля 2015, 19:48 #
      В wordpress втулил это дело в подвал и на dispaly:block; поменял в стилях. «Изображение» в ссылки пишет, а саму картинку не отображает. Такие дела.
      1. avatar Simkin Andrew 11 апреля 2015, 10:59 #
        Значит путь к изображению неправильно прописал. Скрипт был опробован уже сайтах на 10 как минимум, везде работал.
      2. Комментарий был удален.
        1. avatar А-лат 12 августа 2015, 17:16 #
          Живи вечно, чувак!
          1. avatar 0bush 11 февраля 2016, 13:56 #
            Супер. Спасибо.
            1. avatar Игорь 21 апреля 2016, 09:11 #
              Здравствуйте. Кнопка отображается не на всех страницах сайта. Подскажите пожалуйста, что может быть? Очень нужно…
              1. avatar Simkin Andrew 21 апреля 2016, 09:24 #
                Код не на всех страницах размещён. jQuery не на всех страницах подключена. Ошибки в других скриптах мешают выполнению нижележащего javascript кода. Вот основные причины.
              2. Комментарий был удален.
                1. avatar Максим 18 мая 2016, 12:09 #
                  А как сделать кнопку «На главную» в таком же стили при помощи javascript?
                  1. avatar Simkin Andrew 18 мая 2016, 15:38 #
                    В каком стиле? Вместо div поставить a и поставить соответствующую ссылку на главную страницу.
                  2. Комментарий был удален.
                    1. avatar steve3009 12 июня 2016, 20:17(был изменён) #
                      Привет.
                      Спасибо за кнопку. Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется.
                      Подскажите, пожалуйста, что не так.
                      1. avatar steve3009 12 июня 2016, 20:25(был изменён) #
                        Разобрался.
                        Хотел на hover менять opacity, но не работает с текущим механизмом.
                      2. avatar kinoprorok 07 сентября 2016, 23:58(был изменён) #
                        Андрей, спасибо ) Еще раз помог
                        1. avatar Simkin Andrew 09 сентября 2016, 17:40 #
                          не за что, заходи если что)
                        2. avatar Достали! 25 сентября 2016, 17:24 #
                          ДЕБИЛЫ!!! ПРЕКРАТИТЕ ПИХАТЬ ЭТИ КНОПКИ НА КАЖДЫЙ САЙТ!!! Я УЖЕ ЗАКОЛЕБАЛСЯ ИХ УДАЛЯТЬ ЧЕРЕЗ АДБОЛК!!! ЕСЛИ МНЕ НАДО, Я СПОКОЙНО МОГУ НАЖАТЬ КНОПКУ HOME ИЛИ КЛИКНУТЬ ПО ПОЛОСЕ ПРОКРУТКИ!!! А ВАШИ КНОПКИ «ВВЕРХ» ПРЕДНАЗНАЧЕНЫ ДЛЯ КОГО? ДЛЯ ДЕБИЛОВ? НО ВЕДЬ ОНИ ЗАКРЫВАЮТ ЧАСТЬ ТЕКСТА ПРЯМО ПОСЕРЕДИНЕ СТРАНИЦЫ И МЕШАЮТ ЧИТАТЬ!!! ЕСЛИ ЛЮДЯМ БУДУТ НУЖНЫЕ ТАКИЕ КНОПКИ, ЭТО БУДЕТ ВСТРОЕНО В БРАУЗЕР! ПОНЯТНО ВАМ, ДЕБИЛЫ?!!!
                          1. avatar Simkin Andrew 25 сентября 2016, 20:32 #
                            Вот, человек дело говорит. Проверяйте чтобы кнопка не наезжала на контент. Проверяйте на мобильниках. А то видите как бомбит у некоторых))
                          2. avatar 123 28 сентября 2016, 18:51 #
                            Скжите, а как сделать, чтобы кнопка появлялась слева, а не справа
                            1. avatar Simkin Andrew 28 сентября 2016, 21:33 #
                              В стиле заменить right: 30px на left: 30px
                            2. avatar Алиса 04 ноября 2016, 12:19 #
                              Добрый день! У меня тоже проблема в том, что картинка не отображается, я написала текст в этом div чтобы проверить работает ли вообще и действительно функционал работает, но картинки нет. (Если я вывожу картинку непосредственно в этом div «между скобок» тоже работает)
                              но как указано у вас выше, почему то не срабатывает. Очень интересно почему так происходит?
                              если меняю на dispaly:block; то при первой загрузке я вижу текст, проблема как в этом комментарии «Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется.
                              Подскажите, пожалуйста, что не так.»
                              Было бы очень здорово если бы вы ответили, просто интересно почему так происходит.
                              1. avatar Simkin Andrew 04 ноября 2016, 13:04 #
                                Привет. Мне тоже интересно почему не срабатывает у вас. Пришли адрес страницы где не работает кнопка наверх — я сегодня отвечу в чём причина. Можешь прислать на эл. почту (внизу сайта указана) если не хочется адрес сайта писать в комментариях.
                              2. 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 Inna 30 ноября 2016, 20:48 #
                                  Класс, спасибо большое
                                  © REALADMIN.RU   2016 г.
                                  Страница сгенерирована: 0,1074 s | 10 mb.
                                  На каком уровне Вы играете в шахматы?
                                  О П Р О С
                                  Home Question Top