Как добавить кнопку прокрутки вверх в Wordpress

4 Апреля 2017 18:47

Кнопка «вверх» или «back to top» - один из монофункциональных инструментов для улучшения юзабилити сайта. Кнопка предназначена для единственной цели – автоматического скроллинга. При клике на значок back to top, страница прокручивается к заданной начальной точке.
Веб-дизайнеры рекомендуют размещать кнопку в нижнем правом углу экрана, но значок можно расположить на любом другом участке страницы. После нажатия на кнопку часто происходит мгновенное перемещение на верх, поэтому необходимо задать скорость прокрутки.

Пользовательская настройка кнопки



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

Редактируемые параметры:


  1. Скорость прокрутки в миллисекундах.
  2. Время для появления/скрытия кнопки.
  3. Плавность скроллинга.
  4. Выбор позиции на экране.
  5. Наличие анимации и визуальных эффектов (затемнение, мигание, переход в полупрозрачный режим).

Динамические и статические кнопки прокрутки

На сайт можно добавить статическую или динамическую кнопку прокрутки. В первом случае значок back to top постоянно присутствует на экране. Динамическая кнопка появляется и скрывается во время скроллинга, поэтому вариант с ее установкой предпочтительнее.
Для отображения и скрытия кнопки при прокрутке страницы, необходимо использовать специальный код скрипта или выбрать плагин, предлагающий подобную функцию. Динамическая кнопка используется также для прокрутки страницы вниз.
После установки движка на хостинг https://s-host.com.ua можно приступать к добавлению контента и полезных плагинов, призванных улучшить юзабилити сайта. К примеру, одной из таких незаменимых вещей является кнопка прокрутки вверх.
Безусловно, в Wordpress существует множество плагинов, решающих данную задачу. Мы же рассмотрим установку и настройку расширения CG Scroll To Top. Напомним, что прежде чем устанавливать новый плагин, рекомендуется избавиться от тех, которыми вы больше не пользуетесь. Так вы не будете создавать нагрузку на хостинг, а следовательно, не возникнут проблемы со скоростью загрузки страниц.

Установка плагина

Плагин CG Scroll To Top устанавливается стандартным способом через консоль. Вы можете как перейти на страницу Консоль - Плагины- Добавить новый и найти расширение через поиск, так и заранее скачать архив, чтобы загрузить его на этой же странице.
После установки и активации плагина в разделе Консоль- Настройки появится пункт CG Scroll To Top.

Создание кнопки прокрутки вверх

Кликните на пункт меню Консоль Настройки - CG Scroll To Top и вы попадете на страницу CG Scroll To Top Settings. На вкладке Design настраивается такой параметр как
выбор анимированного рисунка (здесь доступны как простые анимированные рисунки, так возможность добавлять свои собственные картинки):


Для того, чтобы загрузить изображение, кликните на кнопку Upload Image и выберите из “Библиотеки файлов” нужный объект (или же загрузите картинку в библиотеку файлов, а затем сделайте выбор) и нажмите “Вставить в запись”.

На вкладке Settings доступны следующие настройки:
  • Filling Animated Settings (настройка анимированного рисунка): высота и ширина круговой шкалы, ее толщина, цвет и фон:

  • General Settings: ширина и высота скроллера, цвет фона скроллера, ширина и позиция стрелки, вывод в записях, страницах и медиафайлах:

Перейдите на свой сайт, чтобы проверить, как работает кнопка прокрутки вверх:

Последние сообщения:
Беседка:
Мы в социальных сетях!