Skyline Scroll to Top

Очередная кнопка, которая осуществляет быстрый возврат наверх просматриваемой страницы. Ранее описанные аналогичные расширения "Adeptus UP", "Top of the Page", "SmoothTop", неоднократно создавали проблемы у читателей блога. Надеемся, что данная разработка не вызовет нареканий.

Skyline Scroll to Top

Шаг 1. Установка расширения

Шаг 2. Настройки. Вкладка "Плагин"

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

Теперь непосредственно к настройкам:

Skyline Scroll to Top
  • Admin Enable - использование кнопки в панели управления сайтом
  • Engine - выбор библиотеки JavaScript для анимации кнопки - jQuery
  • Background Image - распаковываем архив с картинками в папку "Images" и выбираем изображение

Текстовый блок:

Skyline Scroll to Top
  • Text - текст на кнопке
  • Title - название кнопки, которое будет всплывать при наведении курсора
Skyline Scroll to Top

Как видим, кнопка отображается, но фон желательно изменить. Для этого имеется следующий блок.

Skyline Scroll to Top
  • Background Color - цвет фона
  • Text Color - цвет надписи на кнопке
  • Hover Background Color - цвет фона при фокусе на кнопке
  • Hover Text Color - цвет текста при наведении курсора

Меняем фон и получаем следующий вариант отображения кнопки.

Skyline Scroll to Top

Последний блок отвечает за расположение кнопки:

Skyline Scroll to Top
  • Position - кнопку возможно расположить вверху или внизу, справа или слева
  • Border Radius - значение закругления углов кнопки
  • Offset Left/Right - смещение слева и справа
  • Offset Top/Bottom - смещение вверху и внизу
  • Padding Left & Right - отступы слева и справа
  • Padding Top & Bottom - отступы вверху и внизу

Шаг 3. Настройки.
Вкладка "Дополнительные параметры"

Дополнительные необязательные настройки:

Skyline Scroll to Top
  • Scroll Duration - длительность прокрутки (500 = полсекунды)
  • Scroll Transition - эффекты при перемещении страницы
  • Custom CSS - поле для вставки других стилей