Один из основных критериев успешности сайта – удобство его использования. За это отвечают такие составляющие, как понятный интерфейс, правильное расположение важных кнопок для перемещения по сайту, дизайнерские элементы. Сюда же входит кнопка «Вверх», позволяющая вернуться в начало страницы.
В каких случаях стоит использовать кнопку прокрутки и как добавить такой функционал на сайт с 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
На этом у меня все. Удачи вам и вашему сайту!
Комментарии