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

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

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

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

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

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

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

Добавление эффекта плавной прокрутки с помощью 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/ (смотрите также: Как использовать FTP для загрузки файлов WordPress). Если ваша тема не имеет такой папки, то создайте её и загрузите файл smoothscroll.js в неё. Это скрипт jQuery, который добавляет эффект плавной прокрутки к кнопке, направляющей пользователей наверх.

Далее вам нужно добавить smoothscroll.js к вашей теме. Чтобы сделать это, мы добавим скрипт в WordPress. Скопируйте и вставьте этот код в файл темы functions.php .

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

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

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

Как вы уже заметили, мы добавили ссылку, но не привязали её к какому-либо тексту. Мы используем иконку со стрелочкой вверх, чтобы отобразить кнопку перехода наверх. В данном примере, мы возьмём иконку размером 40х40. Добавьте её к вашей теме.

#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/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 мы использовали фиксированную позицию для нашей иконки и использовали иконку изображения в качестве картинки фона. Вы можете загрузить вашу иконку используя загрузчик медиафайлов WordPress и после получить ссылку на неё, чтобы вставить её в качестве ссылки на фон. Мы также добавили немного анимации на CSS, она будет вращать кнопку, когда пользователь держит курсор мышки на ней.

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

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520