Лучшие инструменты для создания кнопки вверх на сайте WordPress

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

Кнопка вверх для сайта с плагином jQuery Smooth Scroll

Поклонникам простоты и скорости подойдет плагин кнопки jQuery Smooth Scroll ссылка на WordPress.org. Установить можно из админки, изображение модуля выглядит так.

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

Что делать если CSS и JS не знакомы администратору сайта. Тогда разберем другой инструменты.

Simple Back To Top

Пойдем от простого к сложному, Simple Back To Top имеет одну функцию – изменять значок кнопки вверх. Ставится так же из панели WordPress стандартным поиском.

• В разделе Настройки появится раздел Back To Top – SBTT
• Выбираем новую картинку путем нажатия “Выберите файл”
• Нажимаем Save

Если картинка будет круглая, то обязательно делайте с прозрачным фоном в формате PNG.

WPFront Scroll Top

Решение типа все включено, плагин WPFront Scroll Top имеет множество настроек и гибкость в выводе кнопки наверх. На скриншоте только часть панели WPFront.

Что умеет WPFront:

1. Установка интервала от верхнего края прокрутки, когда появится кнопка
2. Установка размеров вручную
3. Настройки появления и исчезновения, например, если страница стоит без движения более 3 секунд то объект исчезает
4. Отключение возврата на малых экранах
5. Разный вывод на экран: картинкой, текстом или Font Awesome
6. Действие кнопки не только может перекидывать наверх сайта, но может перекрутит на необходимый раздел в статье, либо сослаться на другую запись WordPress
7. Отступы от края и множество вариантов позиционирования
8. Настройка внешнего вида исключит проблему с использованием CSS

Отличный инструмент, помогающий сделать на WordPress еще одну интересную функцию.

Добавить кнопку в настройках темы

Рассмотрим на примере российского шаблона Reboot для ВП, как добавить кнопку возврата к началу страницы. В этом нет ничего сложного, нужно просто найти ее в настройках.

Откройте сайт на Reboot и авторизуйтесь в админке. Нажмите «Настроить» в верхней панели.

Перейдите в раздел «Модули» > «Кнопка Наверх».

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

Шаблон Reboot сейчас популярен у российских вебмастеров, благодаря его продуманности и цене. А по представленному ниже промокоду тему можно заполучить еще и со скидкой.

Промокод на Reboot

Создаем back to top без плагина

Без плагина кнопку на верх сделать не сложно, стоит придерживаться инструкции. Мы написали код, сейчас разберем его составляющие. Разделим конфигурацию на три кода, первый – тег button. Внутри тега атрибут class и текст, выводимый на блоге. Вставляем в файл темы WordPress на то место, где хотим его видеть, например, правый нижний угол, тогда записываем код в файл footer активной темы перед закрывающим тегом body.

<button type="button" class="scrolltop js-scrolltop">Наверх</button>

Следующая запись это JS код, вставляем так же перед закрывающим тегом body, все скрипты должны располагаться в подвале сайта. Не забываем нажать Обновить.

<script type="text/javascript">
jQuery(function($)
 {
var $scroll_btn = $(".js-scrolltop");

    $scroll_btn.click(function () {
        return $("body,html").animate({
            scrollTop: 0
        }, 500);
    });
});
	</script>

Третий код это CSS стили, подобрали нейтральный синий цвет. Вставляем в файл style.css активной темы WordPress.

.scrolltop {
  padding: 20px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  border: none;
  background: #007ACC;
  text-align: center;
}

Если сделали по инструкции, то на сайте появится кнопка с надписью наверх.

Надпись “наверх” меняется в первом разделе в теге button, а оформление в стилях. Если в текстом не понятно, то предлагаю к просмотру видео.

Заканчиваю статью, разобрались как сделать кнопку, ведущую вверх страницы в CMS WordPress с помощью двух способов: без плагина и с ним, успехов!