Как добавить плавную прокрутку вверх в WordPress используя jQuery

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

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

Что такое плавная прокрутка и когда её использовать?

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

<a href="#" title="Вернуться в начало">^Вверх</a>

Этот способ просто отправляет пользователей наверх страницы и прокручивает всю её за миллисекунды. Способ функциональный, но кустарный. Плавная прокрутка — альтернатива кустарности 🙂 Она плавно перенесет пользователя обратно в начало страницы. Это создает приятный эффект и повышает юзабилити.

Добавляем плавную прокрутку наверх страницы в WordPress используя jQuery

Для добавление плавной прокрутки мы будем использовать 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;
		});
});

Сохраните файл и загрузите его в директорию вашей темы WordPress в папку /js/. Если же в вашей теме нет папки /js/, тогда создайте её и загрузите файл smoothscroll.js в неё. Этот код — скрипт jQuery, который добавит эфект плавной прокрутки к кнопке, которая в свою очередь перемещает пользователя наверх страницы.

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

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

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

<a href="#top" id="smoothup" title="Вверх"></a>

Как вы наверное заметили, мы добавили ссылку, но не добавили в нее текст. Сделали мы так потому, что будем использовать изображение со стрелкой вверх для отображения на сайте кнопки Наверх. В нашем примере мы будем использовать иконку 40x40px. Добавьте следующее в вашу таблицу стилей темы:

#smoothup { 
height: 40px; 
width: 40px; 
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("http://www.example.com/wp-content/uploads/2013/08/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;
}

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

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

Надеемся, что статья помогла вам добавить плавную прокрутку вверх в WordPress используя jQuery. Для добавления других интересных штук на jQuery в WordPress можете посмотреть нашу статью Как добавить jQuery аккордеон FAQ в WordPress.

Как вы считаете, плавная прокрутка полезна? Пишите в комментариях.