Как сделать кнопку вверх для сайта?

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

В WordPress создать такую кнопку возможно несколькими способами: написать простенький код или воспользоваться одним из готовых решений – установить плагин.

Написание кода для кнопки «вверх»

Создание кнопки этим способом подразделяется на четыре этапа: подбор подходящего изображения и написание кода HTML, СSS и JavaScript.

Изображение для кнопки «вверх» можно либо создать самостоятельно, либо скачать готовое из интернета. Поэтом следует загрузить его на хостинг (лучше для этого создать папку с именем, например, «buttonimg»). Далее следует написать такой код, только вместо site.com указать имя своего сайта:

Его нужно добавить вовнутрь , например, файла footer.php. Главное – не вставить внутри какой-нибудь функции.

Следующий шаг – создание стиля CSS-стиля, которой потребуется добавить в конец файла Style.css:

Все, кнопка готова, и будет работать. Но можно еще сделать так, чтобы она появлялась и исчезала при прокрутке. Для этого нужно данный код добавить в файл footer.php:

Для работы этого скрипта необходима поддержка JQuery.

Создать кнопку «вверх» за 2 минуты

Можно воспользоваться готовым решением. Для этого нужно зайти на сайт scrolltotop.com, скопировать код понравившейся кнопки и добавить его в footer.php.

Плагины для создания кнопки «Вверх»

Smooth Scroll Up

 Один из самых популярных плагинов с соответствующим функционалом – Smooth Scroll Up. Он очень прост в конфигурировании. На странице настройки можно определить:

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

Чтобы скачать его, нужно перейти по ссылке: www.ru.wordpress.org/plugins/smooth-scroll-up/ или ввести название плагина в консоли WordPress.

WPFront Scroll Top

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

Ссылка на плагин в репозитории: www.ru.wordpress.org/plugins/wpfront-scroll-top/.

Scroll Back to Top

Scroll Back to Top – еще один плагин с большим количеством скинов. Однако те у него выполнены в более современном дизайне. Также в нем предусмотрено большое количество настроек и есть возможность использования собственного CSS.

Скачать можно отсюда: www.ru.wordpress.org/plugins/scroll-back-to-top/.

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