Вы видели сайты, которые добавляют плавную прокрутку вверх страницы? Это замечательно, когда у вас длинная страница и вы хотите, чтобы пользователи могли легко вернуться к началу. Недавно один из наших читателей спросил нас, как добавить плавную прокрутку к основному эффекту в WordPress. В этой статье мы покажем вам, как добавить плавную прокрутку, чтобы получить лучший эффект в WordPress с помощью jQuery.
Примечание. Этот учебник был создан для опытных пользователей среднего уровня, которым удобно редактировать свои темы. Если вы хотите использовать метод плагина, используйте программируемую страницу, чтобы перейти к верхнему плагину. Для тех, кто хочет научиться делать это без плагина, читайте дальше.
Что такое плавная прокрутка и когда ее использовать?
Когда на странице или посте много контента, пользователи вынуждены прокручивать страницу вниз, чтобы прочитать этот контент. Когда пользователи прокручивают страницу вниз, все навигационные ссылки увеличиваются. Когда пользователи закончат читать эту статью, им следует прокрутить страницу вверх, чтобы увидеть, что еще нужно делать на сайте. Прокрутка до верхней кнопки быстро отправляет пользователей в верхнюю часть страницы. Вы можете добавить это как текстовую ссылку без использования jQuery, например так:
^ Верх
Он просто отправляет пользователей в верхнюю часть страницы и прокручивает всю страницу за миллисекунды. Это функционально, но это как хит на дороге. Плавная прокрутка – противоположность этому. Аккуратно сдвиньте пользователя вверх страницы. Это создает приятный эффект и улучшает пользовательский опыт.
Добавьте плавную прокрутку, чтобы получить лучший эффект с jQuery в WordPress
Чтобы добавить плавную прокрутку к верхнему эффекту, мы будем использовать jQuery, немного CSS и одну строку HTML-кода в вашей теме WordPress. Сначала откройте текстовый редактор, например Блокнот. Создайте файл и сохраните его как smoothscroll.js. Скопируйте и вставьте этот код в файл:
jQuery (документ) .ready (function ($) {
$ (окно) .scroll (function () {
if ($ (this) .scrollTop ()
Сохраните файл и загрузите его в папку / js / в папке темы WordPress (см. Как использовать FTP для загрузки файлов в WordPress). Если в вашей теме нет каталога / js /, создайте его и загрузите в него файл smoothscroll.js. Этот код представляет собой скрипт jQuery, который добавляет эффект плавной прокрутки к кнопке, которая переносит пользователей в верхнюю часть страницы.
Следующее, что нужно сделать, это добавить smoothscroll.js в вашу тему. Чтобы сделать это правильно, мы поместим скрипт в WordPress (подробнее в нашем руководстве о том, как правильно добавлять скрипты в WordPress). Скопируйте и вставьте этот код в файл functions.php вашей темы.
wp_enqueue_script (‘сглаживание’, get_template_directory_uri (). ‘/js/smoothscroll.js’, array (‘jquery’), ”, true);
В приведенном выше коде мы сказали WordPress загрузить наш скрипт, а также загрузить библиотеку jQuery, так как от этого зависит наш плагин. Теперь, когда мы добавили часть jQuery, давайте добавим реальную ссылку на наш сайт WordPress, которая поднимает пользователей на вершину. Вставьте этот HTML-код в любой файл footer.php вашей темы.
Как вы заметили, мы добавили ссылку, но не связывали ее ни с одним текстом. Это потому, что мы будем использовать значок изображения со стрелкой вверх, чтобы отобразить кнопку «вверх». В этом примере мы используем значок 40x40px. Добавьте это в таблицу стилей вашей темы.
#smoothup {
высота: 40 пикселей;
ширина: 40 пикселей;
положение: фиксированное;
низ: 50 пикселей;
справа: 100 пикселей;
отступ текста: -9999px;
Не показывать ни одного;
background: url («https://www.example.com/wp-content/uploads/2013/07/top_icon.png»);
-webkit-transition-duration: 0,4 с;
-моз-переход-длительность: 0,4 с; продолжительность перехода: 0,4 с;
}
#smoothup: наведите курсор на {
-webkit-transform: rotate (360deg)}
фон: URL (”) без повторений;
}
В приведенном выше CSS мы использовали фиксированное положение для значка изображения и использовали значок изображения в качестве фонового изображения. Вы можете загрузить значок изображения с помощью WordPress Media Loader, а затем вставить URL-адрес изображения в качестве фонового URL-адреса. Мы также добавили небольшую CSS-анимацию к кнопке, которая вращается, когда пользователь наводит курсор на нее.
Прокрутка до верхнего эффекта позволяет пользователям вернуться к началу и найти другие занятия на вашем сайте. Еще одна вещь, которую вы можете сделать, это добавить плавающую панель нижнего колонтитула, подобную той, которая есть у нас на нашем сайте, для отображения рекомендуемого контента. Если вы не хотите, чтобы пользователи прокручивали вашу статью, мы настоятельно рекомендуем использовать плавающий плагин для панели обмена в социальных сетях, как мы это делали в WPBeginner.
Мы надеемся, что эта статья помогла добавить плавную прокрутку в верхнюю часть страницы на вашем сайте с помощью jQuery. Для других замечательных применений jQuery в WordPress вы можете ознакомиться с нашей статьей часто задаваемых вопросов об аккордеоне jQuery или статьей с медленной загрузкой изображений.
Как вы думаете, полезно ли прокрутить до верхнего эффекта? Дайте нам знать, оставив комментарий ниже.
