CODE

Плагин ScrollUp — кнопка наверх для сайта на jquery

Содержание

Доброго дня, дорогие читатели моего блога! Сегодня, в данной статье, мы разберем такой замечательный и функциональный плагин — scrollUp — кнопка наверх для сайта.

На сегодняшний день, все поисковики бьются за качественный контент, который максимально подробно даст ответ на интересующий вопрос посетителя. А так как контент это самое, что ни на есть важное в продвижении любого проекта, такие страницы нагромождаются информацией и становятся просто портянками.

Где использовать

Чтобы вернуться в начало сайта, посетителю приходится долго скролить страницу. Конечно, в браузерах, да и на клавиатуре давно есть эта функция, но большая масса людей об этом не знают вовсе.

И поэтому, для такого функционала, как раз и служит такая кнопка наверх для сайта на jquery и она хоть как то помогает увеличить удобство для посетителя.

Читайте также:

Готовое решение

Я никогда не изобретаю велосипед, а всегда беру готовое решение, которое использую всегда, во всех своих проектах, так как такие решения прекрасно работают на всех устройствах без исключения.

В данной статье, будем использовать плагин — scrollUp от разработчика Mark Goodyear, который собственно его и поддерживает уже весьма долгое время. По ссылке ниже, можно скачать последнюю версию.

Кстати, плагин весит всего, менее 2 kb и прекрасно подходит для любой cms и конечно же WordPress.

Скачать

markgoodyear.com/2013/04/scrollup-jquery-plugin-updates/

Документация

github.com/markgoodyear/scrollup

Подключение

Подключаем файл плагина jquery.scrollUp.min.js кнопки наверх после библиотеки jQuery. Скорее всего jQuery уже подключена на вашем сайте, а это значит, что повторно подключать ее не нужно.

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="jquery.scrollUp.min.js"></script>

Ниже, инициализируем сам скрипт, не забываем указать id кнопки или оставляем по умолчанию «scrollUp»

<script>
  $(function() {
    $.scrollUp({
      scrollName: 'scrollUp', // ID элемента
      scrollDistance: 300, // Расстояние от начала страницы до показа кнопки (в пикселях)
      scrollFrom: 'top', // 'top' или 'bottom' (лучше задать стилями)
      scrollSpeed: 300, // Скорость прокрутки (в миллисекундах)
      easingType: 'linear', // Анимация плавности (все анимации на http://easings.net/)
      animation: 'fade', // Анимация появления Fade, slide или none
      animationSpeed: 200, // Скорость анимации появления кнопки (в миллисекундах)
      scrollTrigger: false, // Свой триггер (html кнопка), к примеру '<button>Кнопка вверх</button>'
      scrollTarget: false, // До куда скролим (может быть класс или id), по умолчанию самый верх страницы
      scrollText: 'Вверх', // Текст в кнопке
      scrollTitle: false, // Задаем title кнопки
      scrollImg: false, // Если в качестве кнопки используем изображение
      activeOverlay: false, // Цвет "точки" откуда будет появляться кнопка, по умолчанию '#00FFFF' (для визуальности)
      zIndex: 2147483647 // z-index для точки срабатывания
    });
  });
</script>

Своя анимация

Если есть нужда использовать свою анимацию из параметра «easingType», то в этом случаи, придется устанавливать дополнительный плагин «jQuery Easing»

Скачиваем его по ссылке ниже и подключаем файл — jquery.easing.1.3.min перед плагином кнопки.

Скачать jQuery Easing

plugins.jquery.com/jquery.easing/

Стили

Добавляем необходимые стили для выбранного id

#scrollUp {
  right: 30px;
  width: 30px;
  height: 30px;
  display: inline-block;
  bottom: 30px;
  color: #505050;
  text-decoration: none;
  transform: rotate(-90deg);
}

Кнопка выводится динамически, поэтому html прописывать не нужно.

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