Вы здесь:   Главная » Вебмастеру    »    Добавляем кнопку «наверх» на WordPress без плагина

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

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

Добавляем кнопку "наверх" на 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;
}

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

P.S.

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

Расскажи друзьям:

E-mail рассылка:

Оставить комментарий

Авторизоваться через: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: