Добавляем кнопку «наверх» на WordPress без плагина

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

Как установить кнопку «наверх»

Рассмотрим самый простой вариант кнопки, который добавляется без установки дополнительного плагина. А значит, занимает меньше места и не нагружает сервер. Ниже представленный код скопируйте и вставьте в файл «footer.php» вашей активной темы. Для этого откройте консоль WordPress, и перейдите в пункт «Редактор» в разделе «Внешний вид». Далее открываем «Подвал» из правой колонки, и вставляем код перед закрывающимся тегом «/body».

<a id="gotop" href="#" alt="наверх" title="Вернуться наверх"></a>
<script type="text/javascript">
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() >= "400") $(this).fadeIn("slow")
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() <= "400") $(scrollDiv).fadeOut("slow")
else $(scrollDiv).fadeIn("slow")
});
$(this).click(function() {
$("html, body").animate({scrollTop: 0}, "slow")
})
}
});
$(function() {
$("#gotop").scrollToTop();
});
</script>

Примечание!   В тексте наблюдаем повторяющийся параметр «400», он отвечает за вывод и скрытие кнопки. То есть, после прокрутки страницы на 400 пикселей кнопка «наверх»  покажется в заданном месте, и при скроллинге исчезнет в той же области.
Теперь следует добавить стилей нашей кнопке, чтобы она приняла координаты размещения и корректно отображалась в браузере. Ниже приведённый код CSS размещаем в файле «style.css» в самом конце.

#gotop{
background:url(здесь ссылка на картинку) no-repeat;
z-index: 9999;
opacity: 0.8;
width: 60px;
height: 60px;
display: block;
position: fixed;
cursor: pointer;
right: 25px;
bottom: 20px;
float:right;
}
#gotop:hover{
opacity: 1;
}

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

Вместо послесловия

Вот и всё,теперь проверяем работу скрипта непосредственно на страницах сайта. Если остались вопросы или доработки, отпишитесь о них в комментариях.