Как сделать кнопку вверх в WordPress (Back to top) через плагины

Опубликовано: 01.09.2018

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

Можно, в принципе, создать кнопку наверх с помощью определенных скриптов и правки WordPress шаблона, однако есть вариант проще — плагины. Он идеально подойдет для тех, кому лень разбираться кодом, или тем, кто плохо ориентируется в вопросах веб-разработки. Кроме того, у модулей есть разные настройки для реализации тех или иных интересные фишек. А это тоже, согласитесь, весьма полезно. Из 10-ти плагинов, найденных для функции Back to top, я рассмотрю лишь 4, которые имеют достаточное число скачиваний и отвечают актуальным версиям системы WordPress.

Кнопка вверх WordPress (Back To Top)

Smooth Scroll Up

Лекий и настраиваемый плагин Smooth Scroll Up позволяет добавить кнопку вверх для любого поста/страницы в WordPress. Скачали модуль более 40 тысяч раз, поддерживаются версии WP от 3.2 до 4.1. Последнее обновление было буквально недавно. Имеются переводы на разные языки (русского, украинского пока что нету).

Делаем кнопку вверх WordPress (Scrollup)

Основные возможности Smooth Scroll Up:

Выбор разных элементов для кнопки вверх: текст, картинка, кнопка. Выбор позиции для элемента Back to top: слева, справа, по центру. Возможность указывать любой текст для кнопки наверх. Задание расстояния от верха страницы, после которого появляется кнопка. Анимация при скролинге (прокрутка, затемнение). Отображение/скрытие на главной странице и мобильных устройствах. Добавление события при клике.

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

jQuery Smooth Scroll

Модуль jQuery Smooth Scroll добавляет плавную прокрутку страницы после клика на кнопку вверх. Как и положено, после прохождения определенной точки на странице справа внизу появится элемент Back to top. Плагин скачали более 48 тысяч раз, официально поддерживается версия системы от 3.1 до 4.0. Модуль разработан на основе другого Scroll to Top, который (судя по всему) уже не столь актуален.

Основные фишки jQuery Smooth Scroll:

Автоматическое добавление кнопки после активации и отсутствие лишнего пункта меню в админке WordPress. Не зря в описании модуля сказано «активируйте и забудьте». Плавная прокрутка, появление кнопки вверх в правом нижнем углу. Легкая настройка с помощью правки css/js кода. Все CSS и JS файлы сжаты для лучшего результата Google Page Speed.

Как видите, модуль jQuery Smooth Scroll имеет очень большое отличие от предыдущего. Здесь вообще нет настроек, но для кого это означает меньше мороки с изучением модуля.

WPFront Scroll Top

Плагин WPFront Scroll Top , как и другие, позволяет пользователям сайта легко и быстро пролистывать его наверх с помощью специальной кнопки. Он полностью настраиваемый и работает на всех мобильных устройствах. Установок здесь несколько меньше — более 17 тысяч, поддержка для версий системы от 3.0 до 4.0.

Основные функции:

Собственно отображение кнопки вверх и прокрутка назад в начало страницы при клике. Создание текстовой кнопки или картинки. Добавление любого изображения (!) что захотите. Скрытие на мелких устройствах и ifram’ах. Фильтр для страниц/постов.

Для того чтобы вы убедились, что настроек в модуле WPFront Scroll Top действительно много, публикую скриншот из админки.

Scroll Back To Top

Последний плагин для рассмотрения — Scroll Back To Top . Выполняет все те же функции для кнопки вверх, которая появляется по мере прокрутки страницы вниз пользователем. Идеально подходит тем, кто не силен в HTML, CSS или jQuery. Модуль работает сразу после активации, но вы можете внести изменения в его настройки. Судя по скриншотам из админки разных опций хватает.

Здесь и параметры для кнопки наверх (цвет, граница, фон, прозрачность), и задание расположения элемента Back To Top, и использование картинок или текста для него, плюс опции анимации при прокрутке и т.п. Поддерживаемые версии WordPress — от 3.0 до 3.9.2, скачан модуль более 18 тысяч раз.

Из этих четырех плагинов для кнопки наверх я бы и советовал вам выбирать. Очередность их в обзоре не является рейтингом, то есть не значит, что я рассматривал лучшие в начале или в конце статьи, они идут по мере ознакомления. Все, в принципе, зависит от ваших нужд. Если вы вообще далеки от разработки и WordPress, то проще всего установить Smooth Scroll Up и забыть. Желающим покопаться с настройками, подойдут два последних плагина. Первый — наиболее новый на данный момент. В общем, выбрать есть из чего.