Как добавить кнопку «Вверх» на сайт с WordPress

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

В каких случаях стоит использовать кнопку прокрутки и как добавить такой функционал на сайт с WordPress? Поговорим об этом в сегодняшней статье.

Для чего нужна кнопка «Вверх»

Кнопка «Вверх» – это отличный способ вернуть пользователя в начало веб-страницы. Такой функционал часто используется на длинных страницах, где скролить до начала страницы попросту неудобно.

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

Другая важная особенность кнопки прокрутки – это то, что она делает сайт удобным для поисковых систем, в частности Яндекса. Он ставит поведенческие факторы чуть ли не главным критерием при ранжировании. Таким образом, если вы обеспечите пользователю комфортное нахождение на сайте, то будет удобно не только ему, но и поисковым системам, которые станут относиться к вашему сайту более позитивно.

Какой должна быть кнопка «Наверх»

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

• Не используйте кнопку «Вверх», если длина вашего сайта меньше 4 экранов. Нет необходимости добавлять кнопку, когда у вас простой сайт-визитка – он довольно маленький, поэтому пользователю и так будет удобно добраться до первого экрана.
• Старайтесь расположить кнопку «Наверх» в правом нижнем углу. Если в этой области кнопка будет перекрывать виджет либо мешать чему-то другому, то можно ее разместить в левой части. Но лучше сделать так, чтобы она была реализована справа, так как пользователь обычно старается найти ее в той стороне.
• Используйте графическую кнопку прокрутки, не стоит давать кнопке название «Наверх» или «Вернуться», лучше вставить простую иконку стрелки вверх, подходящую под дизайн вашего сайта.
• Кнопка должна быть контрастной относительно фона – она должна выделяться и быть заметна.
• Добавьте плавную прокрутку до начала страницы. Если перемещение по сайту будет мгновенным, то пользователь может и не понять, что произошло. А когда добавлен плавный скрол, тогда будет не только понятно, но и приятно перемещаться в начало сайта. Кроме того, если пользователю нужно будет остановиться на каком-либо разделе, то он всегда это сможет сделать во время автоматической прокрутки вверх.

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

Альтернативы кнопкам прокрутки

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

• Меню внизу страницы. Отличный подход на тех сайтах, где пользователи прокручивают страницу до самого низа. В футере сайта обычно размещается меню сайта и логотип – с их помощью пользователь может вернуться как в нужный ему раздел, так и в самое начало через клик по лого.
• Прилипающее меню. Вместо кнопки мы также можно сделать так, чтобы основное меню прилипало к экрану и сопровождало пользователя, пока он находится на сайте. Через это меню можно будет перейти к основным разделам, а также вернуться в начало страницы по клику на логотип.

Лучшие плагины для создания кнопки «Наверх»

Для того чтобы добавить кнопку «Вверх» на сайт с WordPress, достаточно установить и активировать специальный плагин. Как правило, дополнительные настройки не требуются, но во многих инструментах можно кастомизировать кнопку под себя и вводить дополнительный функционал. Например, можно сделать так, чтобы кнопка появлялась в определенный момент через N пикселей.

О том, что это за плагины и каким функционалом они обладают, поговорим далее.

jQuery Smooth Scroll

jQuery Smooth Scroll – это удобный и простой плагин для активации кнопки «Вверх». Чтобы добавить на ресурс такую кнопку, достаточно скачать и установить плагин. Сразу после активации сбоку страниц появляется небольшая плавающая кнопка, которая появляется после некоторой прокрутки и автоматически скрывается, когда пользователь возвращается в начало страницы.

Из минусов стоит отметить, что кастомизация кнопки возможна только с помощью CSS. Встроенных настроек нет, поэтому потребуются некоторые знания стилей.

Особенности:

• плавная прокрутка;
• кнопка расположена в правой части экрана;
• дополнительные настройки проводятся с помощью CSS/JS.

Стоимость: бесплатно

Ссылка на скачивание: jQuery Smooth Scroll

Smooth Scroll Up

Smooth Scroll Up – это популярный и функциональный плагин, позволяющий легко поставить кнопку возвращения в начало страницы.

Особенности:

• доступны разные варианты кнопки «Вверх»: текст со ссылкой, иконка, изображение;
• можно добавить собственный комментарий рядом с кнопкой;
• кнопку можно разместить не только справа, но и слева или центру;
• кнопка прокрутки может быть отображена не на всех страницах сайта;
• работает в мобильной версии;
• плавная прокрутка до начала страницы;
• есть анимации для прокруток: slide и fade, без анимационного эффекта;
• можно добавить собственные CSS-стили.

Стоимость: бесплатно

Ссылка на скачивание: Smooth Scroll Up

WPFront Scroll Top

Данный плагин отлично подойдет тем, у кого нет времени самостоятельно придумывать дизайн кнопки «Наверх». Если вы просто хотите, что пользователям было проще читать и просматривать материалы, то WPFront Scroll Top – правильный выбор. Он включает в себя довольно обширную коллекцию различных иконок, которые подойдут по вкусу многим.

Особенности:

• можно изменять размер и прозрачность иконки;
• регулировка степени прокрутки;
• возможность прописать Alt-тег для иконки;
• автоматическое скрытие кнопки через заданное время.

Стоимость: бесплатно

Ссылка на скачивание: WPFront Scroll Top

Scroll Back To Top

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

• максимально просто добавляется на сайт;
• 5 различных форматов отображения кнопки в виде SVG;
• кнопка может быть круглой либо квадратной;
• можно менять цвет и фон кнопки.

Стоимость: бесплатно

Ссылка на скачивание: Scroll Back To Top

Dynamic “To Top” Plugin

Dynamic “To Top” Plugin – еще один плагин, позволяющий легко и быстро добавить кнопку «Вверх». Кнопка отображается во всех браузерах с поддержкой JS и может быть отключена в мобильной версии.

Особенности:

• английский интерфейс;
• плавная скорость прокрутки;
• работает с кэшированием.

Стоимость: бесплатно

Ссылка на скачивание: Dynamic “To Top” Plugin

Skysa Scroll-to-Top App

Skysa Scroll-to-Top App – плагин, который не похож на своих конкурентов. С его помощью можно не просто добавить кнопку «Вверх», но и воспользоваться инструментами для создания виджетов. Например, можно добавить плавающий блок с социальными сетями и элементами прокрутки страницы.

Особенности:

• сайдбар с виджетами;
• большая часть настроек доступна только в pro-версии плагина;
• 10 вариаций внешнего вида кнопки.

Стоимость: есть 15-дневный тестовый период

Ссылка на скачивание: Skysa Scroll-to-Top App

Simple Scroll to Top Button

Простой в использовании плагин с интуитивно понятным интерфейсом, который позволяет легко и быстро добавить кнопку прокрутки «Наверх». Работает он, как и большинство других плагинов: кнопка появляется после того, как пользователь начинает прокручивать страницу.

Особенности:

• совместимость со всеми темами WordPress;
• интеграция FontAwesome;
• множество различных настроек: изменение цвета фона кнопки, степени прокрутки;
• возможность отображения кнопки только на указанных страницах.

Стоимость: бесплатно

Ссылка на скачивание: Simple Scroll to Top Button

To Top

To Top – еще один популярный плагин для добавления кнопки «Вверх». Как и предыдущие расширения, он предлагает несколько настроек для управления внешним видом и поведением кнопки прокрутки.

Особенности:

• есть предварительный просмотр;
• можно изменить цвет, размер и форму иконки;
• доступна возможность скрыть кнопку в мобильной версии;
• кнопку можно скрыть на всех страницах администратора.

Стоимость: бесплатно

Ссылка на скачивание: To Top

Simple Back To Top

Simple Back To Top – крайне простой плагин, который достаточно активировать, и кнопка тут же появится на сайте. Иконку кнопки можно изменить на свое изображение через настройки.

Особенности:

• проект с открытым исходным кодом;
• легко пользоваться;
• плавная прокрутка вверх.

Стоимость: бесплатно

Ссылка на скачивание: Simple Back To Top

CRUDLab Scroll to Top

Последний плагин, о котором мы поговорим, – это CRUDLab Scroll to Top. Он позволяет использовать 15 различных дизайнов кнопки, которая может располагаться как справа, так и слева.

Особенности:

• совместимость со всеми темами WordPress;
• много вариаций дизайна иконки кнопки;
• кнопку можно быстро разместить на всех страницах сайта.

Стоимость: бесплатно

Ссылка на скачивание: CRUDLab Scroll to Top

На этом у меня все. Удачи вам и вашему сайту!