Кнопка вверх для Wordpress с плагином и без

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

Добавить ее на сайт WordPress довольно просто без плагина с помощью специальной функции javascript. Для этого нужно выполнить 4 шага.

1. Поместите в каталог js вашей темы файл goTop.js со следующим содержанием. Если такого каталога нет вы можете его создать, либо использовать любой другой каталог, однако тогда нужно изменить путь к скрипту goTop.js во втором шаге.

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

Проще скачать скрипт в этом архиве.

2. Поместите в файл footer.php вашей темы перед закрывающим тегом </body> следующий код

<a href="#" id="goTop" alt="Наверх" title="Наверх"><img src="<?php echo get_template_directory_uri(); ?>/images/goUp.png" border="0" align="absmiddle" /></a>
<script src="<?php echo get_template_directory_uri(); ?>/js/goTop.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#goTop").scrollToTop();
});
</script>

<a href="#" id="goTop" alt="Наверх" title="Наверх"><img src="<?php echo get_template_directory_uri(); ?>/images/goUp.png" border="0" align="absmiddle" /></a>

$(function() {

$("#goTop").scrollToTop();

});

</script>

Этот код выводит на сайте кнопку и подключает скрипт, который мы разместили в первом шаге.

3. Разместите в каталоге images вашей темы графический файл с изображением кнопки. Вы можете подобрать изображение в интернет, сделать кнопку самостоятельно, или воспользоваться тем, что я поместил в архиве для скачивания (в первом шаге). Там идет серая полупрозрачная кнопка, которую можно окрасить в любой цвет, установив его в виде фона в четвертом шаге.

4. Поместите в файле style.css стилевое описание вашей кнопки, наподобие этого:

#goTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: none;
  cursor: pointer;
  background-color: #3275B5;
}

#goTop {

position: fixed;

bottom: 20px;

right: 20px;

background: none;

cursor: pointer;

background-color: #3275B5;

}

Для тех, кто не знает css, эти инструкции означают следующее:

position: fixed; — положение на сайте в фиксированном положении;
bottom: 20px; — положение кнопки на 20 пикселей от нижнего края экрана;
right: 20px; — положение кнопки на 20 пикселей от правого края экрана;
cursor: pointer; — при наведении курсора на кнопку он меняет свою форму на указатель;
background-color: #3275B5; — цвет фона под кнопкой.

После выполнения всех этих шагов у вас на сайте при начале скроллинга страницы вниз должна появляться кнопка внизу справа. При нажатии на кнопку страница должна плавно возвращаться в начало (smooth scroll).

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

Как ее подключить читаем в статье Как подключить на сайте jquery.

Плагин для кнопки Вверх

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