Вставляем кнопку «наверх» на сайт

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

Порядок действий:

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

Подключаем jQuery — прописываем загрузку последней версии библиотеки в секции «head» шаблона или где-то вверхней части сайта.

<script src="https://code.jquery.com/jquery-git.min.js"></script>

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

width: 100px; height: 40px;	width: 74px; height: 94px;	width: 60px; height: 60px;	width: 67px; height: 80px;	width: 63px; height: 61px;

Вставляем html, скрипт и стиль.

<div id="upbutton"></div>

Код кнопки следует вставить в шаблон сайта. Например, перед закрывающимся тегом </body>

<script>
    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 100)) {
            if ($('#upbutton').is(':hidden') {
                $('#upbutton').css({opacity : 1}).fadeIn('slow');
            }
        } else { 
            $('#upbutton').stop(true, false).fadeOut('fast'); 
        }
    });
    $('#upbutton').on('click', function() {
        $('html, body').stop().animate({scrollTop : 0}, 300);
    });
</script>

Скорость прокрутки можно регулировать, меняя в последней строке число «300».

<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>

В стилях незабываем указать свой путь к изображению, его ширину и высоту.

Кнопка на чистом JS

Плавающую кнопку «наверх» можно сделать и на чистом JavaScript. Всё аналогично предыдущему примеру, в том числе и стили. Меняется только html и скрипт. Библиотека jQuery не нужна.

HTML тег:

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

JS скрипт:

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

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

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

Если кнопка не отображается, то измените в стилях свойство «display: none;» на «display: block;». Появилась?

• Нет. Значит проблема в неправильном пути к изображению или html тег размещён в неподходящем месте шаблона. Попробуйте разместить его перед закрывающимся тегом «body».
• Да. Значит дело в js скриптах. Следует проверить корректность подключения библиотеки jQuery (если применялся первый вариант). Всё в порядке? Тогда оберните скрипт в следующую конструкцию:

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

Конструкция выполняет скрипт после загрузки всей страницы.

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