Курс: Продающий лендинг для вашего бизнеса Бесплатно
Создайте сайт с нуля за 40 минут и запустите продажи

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

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

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

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

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

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

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

Удобство пользования сайта юзабилити

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

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

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

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

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

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

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

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

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

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

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

jQuery Smooth Scroll

Плагин jQuery Smooth Scroll для создания кнопки вверх WordPress

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

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

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

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

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

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

Smooth Scroll Up

Плагин Smooth Scroll Up для создания кнопки вверх WordPress

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

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

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

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

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

WPFront Scroll Top

Плагин WPFront Scroll Top для создания кнопки вверх WordPress

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

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

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

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

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

Scroll Back To Top

Плагин Scroll Back To Top для создания кнопки вверх WordPress

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

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

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

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

Dynamic “To Top” Plugin

Плагин Dynamic “To Top” Plugin для создания кнопки вверх WordPress

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

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

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

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

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

Skysa Scroll-to-Top App

Плагин Skysa Scroll-to-Top App для создания кнопки вверх WordPress

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

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

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

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

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

Simple Scroll to Top Button

Плагин Simple Scroll to Top Button для создания кнопки вверх WordPress

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

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

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

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

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

To Top

Плагин To Top для создания кнопки вверх WordPress

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

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

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

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

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

Simple Back To Top

Плагин Simple Back To Top для создания кнопки вверх WordPress

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

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

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

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

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

CRUDLab Scroll to Top

Плагин CRUDLab Scroll to Top для создания кнопки вверх WordPress

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

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

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

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

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

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

Комментарии

С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте