Как добавить эффект плавной прокрутки вверх в WordPress с помощью jQuery

Вы хотите добавить эффект плавной прокрутки вверху страницы на своем веб-сайте WordPress?

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

В этой статье мы покажем вам, как добавить эффект плавной прокрутки вверх в WordPress с помощью jQuery и плагина.

Что такое Smooth Scroll и когда его следует использовать?

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

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

Вы можете добавить эту функцию в виде простой текстовой ссылки без использования jQuery, например:

<a href="#" title="Back to top">^Top</a>

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

Плавная прокрутка противоположна этому. Это вернет пользователя наверх с визуально приятным эффектом. Использование таких элементов может значительно улучшить взаимодействие с пользователем на вашем сайте.

Тем не менее, давайте посмотрим, как вы можете добавить эффект плавной прокрутки вверх с помощью плагина WordPress и jQuery.

Как добавить плавный эффект прокрутки вверх с помощью плагина WordPress

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

Первое, что вам нужно сделать, это установить и активировать плагин WPFront Scroll Top. Если вам нужна помощь, ознакомьтесь с нашим руководством по установке плагина WordPress.

После активации вы можете перейти в «Настройки» — «Прокрутка вверх» на панели инструментов WordPress. Здесь вы можете настроить плагин и настроить эффект плавной прокрутки.

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

Если вы прокрутите вниз, вы найдете дополнительные параметры, такие как редактирование времени автоматического скрытия, включение опции скрытия кнопки на небольших устройствах и скрытие ее на экране wp-admin.

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

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

Плагин WPFront Scroll Top также предлагает фильтры для отображения кнопки прокрутки вверх только на выбранных страницах.

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

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

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

Когда вы закончите, просто нажмите кнопку «Сохранить изменения».

Теперь вы можете посетить свой веб-сайт, чтобы увидеть кнопку прокрутки вверх в действии.

Добавление эффекта плавной прокрутки вверх с помощью jQuery в WordPress

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

Мы будем использовать jQuery, немного CSS и одну строку HTML-кода в вашей теме WordPress, чтобы добавить эффект плавной прокрутки вверху.

Сначала откройте текстовый редактор, например Блокнот, и создайте файл. Сохраните его как smoothscroll.js .

Далее вам нужно будет скопировать и вставить этот код в файл:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

После этого вы можете сохранить файл и загрузить его в папку /js/ в каталоге вашей темы WordPress. Для получения более подробной информации см. наше руководство о том, как использовать FTP для загрузки файлов в WordPress.

Если в вашей теме нет каталога /js/ , вы можете создать его и загрузить в него smoothscroll.js . Вы также можете ознакомиться с нашим руководством по файлам и структуре каталогов WordPress для получения дополнительной информации.

Этот код представляет собой сценарий jQuery, который добавит эффект плавной прокрутки к кнопке, которая перемещает пользователей в начало страницы.

Следующее, что вам нужно сделать, это загрузить файл smoothscroll.js в вашу тему. Для этого мы поставим скрипт в очередь в WordPress.

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

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

В приведенном выше коде мы сказали WordPress загрузить наш скрипт, а также загрузить библиотеку jQuery, поскольку наш плагин зависит от нее.

Теперь, когда мы добавили часть jQuery, давайте добавим фактическую ссылку на наш сайт WordPress, которая возвращает пользователей наверх. Просто вставьте этот HTML-код в любое место в файле footer.php вашей темы. Если вам нужна помощь, ознакомьтесь с нашим руководством о том, как добавить код верхнего и нижнего колонтитула в WordPress.

<a href="#top" id="smoothup" title="Back to top"></a>

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

В этом примере мы используем значок размером 40x40px. Просто добавьте приведенный ниже пользовательский CSS в таблицу стилей вашей темы.

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

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

В приведенном выше CSS убедитесь, что вы заменили https://www.example.com/wp-content/uploads/2013/07/top_icon.png URL-адресом изображения, которое хотите использовать. Вы можете загрузить свой собственный значок изображения с помощью загрузчика мультимедиа WordPress, скопировать URL-адрес изображения, а затем вставить его в код.

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

Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.