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

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

Установка кнопки вверх на Ваш ресурс

Для того чтобы успешно установить подобную кнопку на свой сайт, Вам необходимо будет выполнить следующие действия:

Скачать скрипт, а также картинку кнопки (ссылка), скопировать фай arrow.js в папку wp-includes/js, а файл картинки arrows.png, необходимо скопировать в папку img, ее необходимо создать в корне Вашего ресурса.

Затем мы открываем файл header.php находим там тег </head>, перед ним вставляем следующий код:

Исходный код

<script type="text/javascript" src="http://Адрес_сайта/wp-includes/js/arrow.js"></script>

В данной строке кода не забудьте указать адрес Вашего сайта. После чего Вы сохраняете данный файл и заменяете его на сервере. Далее открываете файл footer.php и находите там тег </body>, перед ним вставляете следующий код:

Исходный код

<a class="scrollTop" id="gotop" onclick="top.goTop(); return false;" href="#"></a>

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

Исходный код

.scrollTop{
 background:url(http://Адрес_сайта/img/arrows.png) 0 0 no-repeat;
 display:block;
 width:50px;
 height:50px;
 position:fixed;
 bottom:10px;
 left:95%;
 z-index:2000;
}
.scrollTop:hover{
 background-position:100% 100%;
}

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

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