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

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

Из этой статьи вы узнаете:

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

Кнопка вверх с помощью плагина

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

Подготовительные шаги

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

Во-первых, есть одно важное действие, которое вы должны предпринять, прежде чем начать.

Шаги по настройке кнопки просты, но для этого потребуется редактирование файлов тем. По этой причине важно, чтобы вы создавали резервные копии файлов style.css и functions.php в теме, где вы хотите, чтобы кнопка отображалась. Создайте резервную копию всего сайта, на всякий случай, мало ли что может случится.

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

1 Способ. Кнопка вверх для сайта JQuery

Шаг 1

Получите доступ к файлам своего сайта через FTP или cPanel и перейдите к папке JavaScript вашей темы, которая будет находиться в разделе wp-content> themes> your-theme> js. Расположение этого файла может отличаться, но обычно он находится здесь.

Если ваша тема не содержит js-папку, тогда создайте ее. В этой папке создайте новый файл с именем topbutton.js. Вы можете назвать этот файл так, как хотите, но, если вы измените имя, то вам также нужно будет изменить каждую ссылку на него в добавляемом вами коде. Далее добавьте следующий код в новый файл:

 jQuery ( документ ). ready ( function ( $ ) {
var offset = 100 ;
var speed = 250 ;
var duration = 500 ;
$ ( окно ). scroll ( function () {
if ( $ ( this ). scrollTop () < offset) { $ ( ' .topbutton ' ). fadeOut (продолжительность); } else { $ ( ' .topbutton ' ). fadeIn (продолжительность); } }); $ ( ' .topbutton ' ). on ( ' click ' , function () { $ ( ' html, body ' ). анимации ({scrollTop : 0 }, скорость); return false ; }); }); 

Вы можете отрегулировать, как быстро кнопка прокручивается вверх, редактируя номер рядом с переменной var speed =. Чем выше число, тем медленнее будет автоматический прокрутка.

Аналогично, вы можете настроить скорость анимации затухания, отредактировав номер рядом с var duration = и сколько пикселей прокручивается на странице, когда кнопка появляется путем редактирования значения для var offset =. Этот скрипт настроен для отображения кнопки после прокрутки 100 пикселей на странице.

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

Шаг 2. Делаем кнопку

Далее нам понадобится изображение кнопки вверх. Загрузите изображение на свой сайт. Обратите внимание на прямую ссылку изображения. После того, как вы загрузили файл рисунка, вы можете найти нужный URL-адрес, просмотрев медиа-библиотеку и нажав на миниатюру своей кнопки. Появится всплывающее окно в строке, а с правой стороны вы найдете ссылку. 

Шаг 3. Редактируем файл style.css

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

.topbutton { height:50px; width:50px; position:fixed; right:5px; bottom:5px; z-index:1; background-image: url («https://kopslav.ru/wp-content/uploads/2018/01/ topbutton -1.jpg»); background-repeat:no-repeat; display:none; } 

Не забудьте заменить ссылку изображения в этом фрагменте кода URL-адресом вашей кнопки, указанным в предыдущем шаге. Если вы не измените ссылку, кнопка не появится, поэтому не забудьте этот шаг.

Шаг 4. Редактируем функции php

Чтобы созданный вами JavaScript-файл имел какой-либо эффект, вам нужно указать WordPress, который вы хотите использовать. Вы можете сделать это, создав так называемый скрипт enqueue в файле functions.php вашей темы. Лучшее место для добавления следующего кода в самом конце файла, таким образом, будет менее вероятно, что он будет мешать другому коду.

 function my_scripts_method () { wp_enqueue_script ( 'custom-script', get_stylesheet_directory_uri () . '/js/topbutton.js', array ( 'jquery' ) ); } add_action ( 'wp_enqueue_scripts', 'my_scripts_method' ); 

После того, как вы отредактировали и сохранили файл, загружаем его через панель управления, или FTP.

Шаг 5. Добавляем ссылку кнопки

Добавляем фактическую ссылку на страницы вашего сайта, чтобы появилась обратная кнопка. Вы можете поместить эту ссылку в каждый шаблон страницы, который у вас есть, или в файл header.php, но так как кнопка появится в нижней части страницы, давайте поместим ее в нижний колонтитул. 

Откройте файл footer.php, который, скорее всего, будет найден в папке wp-content> themes> your-theme. Кнопка настроена на зависание отдельно по всему содержимому страницы в самом низу, в правом углу, поэтому не имеет значения, где вы добавляете ссылку на кнопку.

Размещение между нижним колонтитулом или тегом div обычно является хорошим местом. Если вы решите изменить положение кнопки в таблице стилей CSS, имейте в виду, что на самом деле вы можете добавить ссылку на кнопку.

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

<a href="#" class="topbutton"></a> 

Вы можете заметить, что на самом деле у ссылки нет никакого связанного с ней текста. Это связано с тем, что мы уже установили образ кнопки с CSS, поэтому нет необходимости его добавлять, мы используем класс вместо id для определения ссылки и ее свойств.

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

2 Способ. Плагин WPFront Scroll Top

В этом способе мы воспользуемся очень интересным плагином WPFront Scroll Top (https://wordpress.org/plugins/wpfront-scroll-top/). Скачиваем, устанавливаем, активируем наш плагин. Если проделали эти шаги, то приступаем к следующим.

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

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

Далее вам необходимо настраиваем работу и отображение. Мы остановимся на главных настройках. Смотрим на скриншот. 

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

Указываем конкретные страницы, на которых вы хотите отображать кнопку в разделе настроек «Фильтр».

Далее выбираем стиль оформления кнопки из предложенных вариантов в разделе «Картинка».

Если не один из предложенных вариантов вам не понравился, то воспользуйтесь своим вариантом. Для этого ставим точку возле пункта «URL своей картинки». Подготавливаем картинку и грузим ее в библиотеку медиафайлов, затем вставляем в поле «URL своей картинки» адрес только что загруженного изображения. 

Все на осталось все это дело сохранить. Ну что бежим проверять как наша кнопка вверх работает.

Вот и все! Теперь посетители вашего сайта смогут пользоваться вашей замечательной кнопкой вверх. Мы показали вам несколько способов добавления кнопки вверх на ваш проект. Каким из них воспользоваться, это решать вам. А у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!