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

В этой статье я расскажу как сделать кнопку «вверх» (вернуться к началу страницы) для сайта на WordPress без установки дополнительных плагинов. Для реализации задуманного будем использовать HTML, CSS и JQUERY.

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

Как правило кнопку «вверх» размещают в правом нижнем углу экрана. «Правила хорошего тона» предписывают ее сокрытие в начале страницы и ненавязчивое появление при прокрутке страницы вниз в процессе чтения (просмотра) сайта.

С недавних пор я так же обзавелся подобной кнопкой на этом блоге.

В интернете полно статей на эту тему (как сделать кнопку вверх на сайте), но мой вариант гарантированно работает на WordPress, имеет минимальный код, не использует сторонних изображений и не требует дополнительных шрифтов. Однако базовые знание по WordPress, HTML, CSS и jQuery вам все таки понадобятся 🙂

Как создать кнопку «вверх» на HTML

Кнопка «вверх» в моем примере это блок DIV, который мы оформим в виде кнопки с помощью CSS стилей. Чтобы у вас появилась эта кнопка разместите следующий код у себя на сайте, я рекомендую это сделать в самом конце HTML кода перед закрывающими тегом BODY.

<div class="back2top" title="К началу страницы">&#9650;</div>

Если у вас сайт на WordPress, то, как правило, вам будет необходимо отредактировать файл footer.php вашей темы. В русской версии он называется «Подвал». Я размещаю указанный код перед вызовом функции WordPress <?php wp_footer(); ?>

В качестве символа (стрелки вверх) я использую спецсимвол с кодом ▲

Оформление кнопки «вверх» CSS стилями

Чтобы наш блок DIV выглядел как кнопка присвоим ему следующие стили (их нужно разместить в файле style.css вашей темы WordPress):

.back2top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #777;
    color: #fff;
    padding: 15px 20px;
    border-radius: 3px;
}

.back2top:hover {
    background: #444;
    color: #69c;
    cursor: pointer;
}

Код jQuery для кнопки «вверх»

Для того, чтобы наша кнопка заработала разместите следующий скрипт в конце вашей страницы перед закрывающими тегами BODY и HTML:

<!-- Кнопка вверх -->
<script type="text/javascript">
jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('.back2top').show('slow');
        } else {
            $('.back2top').hide('slow');
        }
    });
        $('.back2top').click(function(){
            $('html, body').animate({ scrollTop: 0 }, 'slow');
            return false;
        });
});
</script>

У меня в редакторе WordPress это выглядит следующим образом:

Как подключить jQuery

Как правило в WordPress библиотека jQuery уже подключена. Но если вы еще не сделали этого, то можете воспользоваться моими рекомендациями из этой статьи — https://moonback.ru/page/wordpress-jquery

В простейшем случае вы можете использовать следующий код, который необходимо прописать перед упомянутым выше скриптом для кнопки «вверх» (пример приведен для самой свежей версии jQuery на момент написания статьи):

<script type='text/javascript' src='https://code.jquery.com/jquery-3.5.0.min.js'></script>

Примеры работы кнопки вверх

Работающую кнопку «вверх» вы можете протестировать на этом блоге. Он работает на WordPress и использует код из этой статьи. Дополнительно я подготовил отдельную страничку для демонстрации работы кнопки «вверх» — https://moonback.ru/test/back2top.html

Благодарности

При написании статьи были использованы следующие источники:

1. https://oddstyle.ru/wordpress-2/stati-wordpress/ispolzovanie-vmesto-jquery-v-wordpress.html
2. http://jquery.page2page.ru/index.php5/Появление_и_иcчезновение_элементов
3. https://web-ptica.ru/blog/10-scripty/32-skript-knopki-naverkh-na-sajt-knopka-vverkh-dlya-sajta