Здравствуйте, сегодня мы реализуем кнопку «наверх» для сайта. Кнопка является универсальной и применять ее можно на любом сайте, будь то WordPress, Joomla, или обычная HTML страница.
Эта кнопка наверх для сайта разработана на технологиях jQuery и имеет плавную прокрутку, так-же она исчезает когда страница прокручена до верху и появляется при прокрутке страницы вниз. Я перебрал много вариантов таких кнопок «наверх» и остановился именно на этом варианте, потому что кнопка имеет минимум кода, и легко и безконфликтно встраивается в код любого сайта. Я ее применяю во всех своих проектах.
Кнопка наверх для сайта WordPress.
Кнопка реализована достаточно просто. Для ее функционирования понадобится библиотека jQuery, небольшой скрипт содержащий события jQuery, определенные стили и тег DIV содержащий сам текст и необходимый ID.
Проще говоря откройте файл footer.php и перед закрывающим тегом вставьте нижеприведенный код:
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
<div ID="toTop"></div>
Тут что можно настроить, так это появление-исчезание кнопки. Этот код копировать не нужно, он уже есть выше. Просто пример.
$('body,html').animate({scrollTop:0},800);Если заменить значение 800, например, на 1000, то скролл наверх будет медленнее. Следующим шагом нужно открыть файл style.css и добавить в самое окончание следующие строчки кода:
/* --------- ширина и высота контейнера должна соотв. размеру картинки
-----------------меняете картинку, меняйте и размер контейнера*/
#toTop {
width:50px; /* ширина контейнера 50px*/
height: 50px; /* высота контейнера*/
background:url(/img/top.png) no-repeat; /* путь к картинке 50 на 50px*/
opacity: 0.7; /* небольшая прозрачность*/
position:fixed;
bottom:10px; /* отступ кнопки от нижнего края страницы*/
right:10px; /* отступ кнопки от правого края страницы*/
cursor:pointer; /* активный курсор при наведении*/
display:none;
}
#toTop:hover{
opacity: 1; /* непрозрачность при наведении*/
}В коде я все прокомментировал и вы с легкостью сможете поменять значения на нужные именно вам.
Теперь скачайте папку с картинкой для нашей кнопки наверх для сайта, распакуйте и закиньте ее в каталог вашей активной темы вместе с папкой img.
Если кто сомневается как это сделать, в помощь статья «Как прописать путь к файлу, папке на хостинге»
Для того, чтобы поменять картинку, нужно просто заменить ее, а новую кнопку назвать так-же как старую, в архиве это top.png Все, проверяйте, кнопка наверх для сайта должна заработать.
Если кнопка не работает, то необходимо подключить библиотеку jQuery. Для этого, перед закрывающим тегом нужно еще и добавить этот код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Хотя WordPress уже по умолчанию имеет в наличии подключенную библиотеку jQuery. Я тестировал кнопку на многих шаблонах WordPress и нигде мне не приходилось подключать jQuery.
Кнопка наверх для HTML сайта подключается аналогично.
— Если вам пригодилась моя статья «Кнопка наверх для сайта», жмите кнопки соц сетей.
Информация бр 100.45.15 здесь. Ищу работу вебкой переводчик в вебкам grandmodels.online.
Похожие по Тегам статьи
Создание Video Background HTML 5В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы
Оформление текста в HTML — Выноски CalloutПубликую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…
Слайдер Bootstrap Ken Burns Effect CarouselСобрал слайдер Bootstrap Ken Burns Effect Carousel и теперь делюсь с читателями своего сайта….
Егор, приветствую! Замечательно Вы рассказали все про кнопку вверх. На многих сайтах я увидела кнопку, которая может поднять вверх и вниз статью. У меня к Вам вопрос: А могли бы Вы рассказать, как можно сделать такую кнопку? Насколько это просто или сложно?
Здравствуйте, сложно или нет, это кому как. Алгоритм один. Нужно только поискать такую кнопку в сети ну или написать скриптик.
А что нужна такая кнопка?
Да Егор, хотелось бы такую кнопку. Мне уже написали и пишут, что пора двойную кнопку. Потому что статья очередной лохотрон — там больше 200 комментариев. Но попозже. Сколько будет стоить Ваша услуга установки такой кнопки?
Мне как бы не к спеху, это в перспективе, пока разбираюсь со своим шаблоном. Сейчас допишу Вам один вопрос в ваших услугах.
А что там кнопку то ставить? 5 минут. Больше картинку подбирать. Найдите себе картинку. Можно отсюда http://iconizer.net/ru/free_icons иконку на прозрачном фоне взять и под себя настроить. Размеры 75 на 75 пикселов делайте. Картинка будет одна, но отражаться зеркально (вверх и вниз). То-есть, например выбираете одну стрелку вниз и все. Она при установке отразиться вверх. Просто скиньте на почту мне пару файлов из вашего сайта
footer.php и functions.php
Спасибо Егор. Отправила два файла.
С днем защитника Отечества!
Торжествует вся страна!
И словами восхищения
Наполняется душа.
Это праздник силы, доблести
Праздник мужества, любви.
Поздравления как почести
Спасибо! *THUMBS UP* Тебя тоже С днем защитника Отечества!
Егор! С Праздником Вас!
Мальчики, парни, мужчины!
Цвет восходящей зари!
Гордость старинной былины –
Русские богатыри!
Станьте опорой России,
Светлой надеждой страны,
Умной и доброю силой,
Родины нашей сыны!
Чтобы всегда восхищаться
Вами Россия могла,
Не нападать — защищаться,
Землю свою сберегла.
Вашею сильной рукою
Мир нужно нам сохранить,
Чтобы счастливой судьбою
Внукам и правнукам жить.
Спасибо от души! Приятно, честное слово!
Егор, сделал как вы описали, но иконка «вверх» не появилась. Затем убрал строку display:none; — иконка уже появилась, но при нажатии никак не реагирует. Вот скриншот вставки кода в футер, скорее всего я не туда код вставил.?
На скрине вроде все верно.
Спасибо вам!
Я написал в статье http://filwebs.ru/uvelichenie-skorosti-zagruzki-sajta/ . Сделал вот так и все работает. Еще и скорость увеличилась. А в статье ничего менять не нужно. display:none; убирать не нужно.
Я вот тут о чем подумал… а после обновлении темы это все дело разве не слетит? Может лучше воспользоваться плагином? Ведь скорость выполнения скрипта все равно будет одинаковая, — что я вставлю код вручную, что посредством плагина. Только в случае с плагином, после обновлении темы кнопка «Вверх» будет работать. Разве не так?
Слетит. А вообще можно и плагином поставить.
А что, тема обновляется часто? Как альтернатива, если вы занимаетесь настройкой тем вордпресс на заказ, вносить изменения в альтернативный файл http://filwebs.ru/alternativa-fajlu-functions-php-wordpress/
А так, плагин скролла особо не влияет на скорость загрузки. Я предложил метод при котором можно заодно и прилично ускорить сайт. Вся информация взята из кодекса Вордпресс
Насколько я знаю, этот альтернативный файл помещают также в дочернюю тему, вместе с кастомным CSS. Получается можно сделать и так, и так.
А если дочерняя тема, то при обновлении материнской, тогда ничего не слетит в дочернем functions.php Этот файл можно как плагин установить и подключить. Только смысла нет, мне кажется. У меня такой файл есть на тестовом сервере, что-бы при смене темы сохранялись мои установки в дополнение к functions.php
Егор, я сменила тему и в теме есть хороший плагин, чтобы при обновлении в functions.php не пропадали внесенные изменения. Скрипты в хедере и в подвале сайта. я еще не совсем разобралась с ними.
Здравствуйте! А как сделать, чтобы кнопка отображалась не в правом нижнем углу, а с правого края, но посередине?
Егор, солнце ты мое! Где был Ваш сайт??? Я вся испереживалась, захожу — нет сайта, я уже на своем блоге написала вопрос , ждала — ответа не получила. Все нормально теперь? Очень надеюсь на ответ. Спасибо. Удачи и не пропадайте пожалуйста так надолго. Обещаете?
Егор, у меня ошибка 500 вылазит при настроить тему: На сайте произошла ошибка при получении мой блог.ru/wp-admin/customize.php?return=%2Fwp-admin%2Fthemes.php. Возможно, сайт временно недоступен или настроен неправильно.
Где что искать, я уже забодалась и Вас не было долго. Включила в debug true, а где увидеть отображенные ошибки? Можете подсказать? Спасибо заранее.
Здравствуйте, Надежда! Спасибо, что переживаете!!! Я не собирался останавливаться и не собираюсь!!! Такой момент в жизни произошел, когда мы предполагаем, а Господь располагает! Долго объяснять, может потом в личном сообщении напишу, надеюсь вы меня поймете.
Насчет ошибки на вашем сайте, где-то я такое встречал, нужно посмотреть. Я с вами свяжусь.
Егора, Слава Богу появился))) Да, я согласна с Вами, что бывают моменты: человек располагает, а Господь располагает. Я тоже проходила через такие ситуации. Спасибо за ответ. Я подожду.