Кнопка наверх для сайта


кнопка наверх для сайтаЗдравствуйте, сегодня мы реализуем кнопку «наверх» для сайта. Кнопка является универсальной и применять ее можно на любом сайте, будь то 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 сайта подключается аналогично.

— Если вам пригодилась моя статья «Кнопка наверх для сайта», жмите кнопки соц сетей.


Похожие по Тегам статьи


24 thoughts on “Кнопка наверх для сайта

  1. Надежда Суптеля

    Егор, приветствую! Замечательно Вы рассказали все про кнопку вверх. На многих сайтах я увидела кнопку, которая может поднять вверх и вниз статью. У меня к Вам вопрос: А могли бы Вы рассказать, как можно сделать такую кнопку? Насколько это просто или сложно?

    1. Егор Автор записи

      Здравствуйте, сложно или нет, это кому как. Алгоритм один. Нужно только поискать такую кнопку в сети ну или написать скриптик.
      А что нужна такая кнопка?

      1. Надежда Суптеля

        Да Егор, хотелось бы такую кнопку. Мне уже написали и пишут, что пора двойную кнопку. Потому что статья очередной лохотрон — там больше 200 комментариев. Но попозже. Сколько будет стоить Ваша услуга установки такой кнопки?

  2. Надежда Суптеля

    Мне как бы не к спеху, это в перспективе, пока разбираюсь со своим шаблоном. Сейчас допишу Вам один вопрос в ваших услугах.

    1. Егор Автор записи

      А что там кнопку то ставить? 5 минут. Больше картинку подбирать. Найдите себе картинку. Можно отсюда http://iconizer.net/ru/free_icons иконку на прозрачном фоне взять и под себя настроить. Размеры 75 на 75 пикселов делайте. Картинка будет одна, но отражаться зеркально (вверх и вниз). То-есть, например выбираете одну стрелку вниз и все. Она при установке отразиться вверх. Просто скиньте на почту мне пару файлов из вашего сайта
      footer.php и functions.php

  3. Роман

    С днем защитника Отечества!
    Торжествует вся страна!
    И словами восхищения
    Наполняется душа.
    Это праздник силы, доблести
    Праздник мужества, любви.
    Поздравления как почести

    1. Егор Автор записи

      Спасибо! *THUMBS UP* Тебя тоже С днем защитника Отечества!

  4. Надежда Суптеля

    Егор! С Праздником Вас!

    Мальчики, парни, мужчины!
    Цвет восходящей зари!
    Гордость старинной былины –
    Русские богатыри!

    Станьте опорой России,
    Светлой надеждой страны,
    Умной и доброю силой,
    Родины нашей сыны!

    Чтобы всегда восхищаться
    Вами Россия могла,
    Не нападать — защищаться,
    Землю свою сберегла.

    Вашею сильной рукою
    Мир нужно нам сохранить,
    Чтобы счастливой судьбою
    Внукам и правнукам жить.

    1. Егор Автор записи

      Спасибо от души! Приятно, честное слово!

  5. Вениамин

    Егор, сделал как вы описали, но иконка «вверх» не появилась. Затем убрал строку display:none; — иконка уже появилась, но при нажатии никак не реагирует. Вот скриншот вставки кода в футер, скорее всего я не туда код вставил.?

          1. Вениамин

            Я вот тут о чем подумал… а после обновлении темы это все дело разве не слетит? Может лучше воспользоваться плагином? Ведь скорость выполнения скрипта все равно будет одинаковая, — что я вставлю код вручную, что посредством плагина. Только в случае с плагином, после обновлении темы кнопка «Вверх» будет работать. Разве не так?

          2. Егор Автор записи

            Слетит. А вообще можно и плагином поставить.
            А что, тема обновляется часто? Как альтернатива, если вы занимаетесь настройкой тем вордпресс на заказ, вносить изменения в альтернативный файл http://filwebs.ru/alternativa-fajlu-functions-php-wordpress/
            А так, плагин скролла особо не влияет на скорость загрузки. Я предложил метод при котором можно заодно и прилично ускорить сайт. Вся информация взята из кодекса Вордпресс

  6. Вениамин

    Насколько я знаю, этот альтернативный файл помещают также в дочернюю тему, вместе с кастомным CSS. Получается можно сделать и так, и так.

    1. Егор Автор записи

      А если дочерняя тема, то при обновлении материнской, тогда ничего не слетит в дочернем functions.php Этот файл можно как плагин установить и подключить. Только смысла нет, мне кажется. У меня такой файл есть на тестовом сервере, что-бы при смене темы сохранялись мои установки в дополнение к functions.php

      1. Надежда Суптеля

        Егор, я сменила тему и в теме есть хороший плагин, чтобы при обновлении в functions.php не пропадали внесенные изменения. Скрипты в хедере и в подвале сайта. я еще не совсем разобралась с ними.

  7. Сергей

    Здравствуйте! А как сделать, чтобы кнопка отображалась не в правом нижнем углу, а с правого края, но посередине?

  8. Надежда Суптеля

    Егор, солнце ты мое! Где был Ваш сайт??? Я вся испереживалась, захожу — нет сайта, я уже на своем блоге написала вопрос , ждала — ответа не получила. Все нормально теперь? Очень надеюсь на ответ. Спасибо. Удачи и не пропадайте пожалуйста так надолго. Обещаете?

  9. Надежда Суптеля

    Егор, у меня ошибка 500 вылазит при настроить тему: На сайте произошла ошибка при получении мой блог.ru/wp-admin/customize.php?return=%2Fwp-admin%2Fthemes.php. Возможно, сайт временно недоступен или настроен неправильно.
    Где что искать, я уже забодалась и Вас не было долго. Включила в debug true, а где увидеть отображенные ошибки? Можете подсказать? Спасибо заранее.

  10. Егор Автор записи

    Здравствуйте, Надежда! Спасибо, что переживаете!!! Я не собирался останавливаться и не собираюсь!!! Такой момент в жизни произошел, когда мы предполагаем, а Господь располагает! Долго объяснять, может потом в личном сообщении напишу, надеюсь вы меня поймете.

    Насчет ошибки на вашем сайте, где-то я такое встречал, нужно посмотреть. Я с вами свяжусь.

    1. Надежда Суптеля

      Егора, Слава Богу появился))) Да, я согласна с Вами, что бывают моменты: человек располагает, а Господь располагает. Я тоже проходила через такие ситуации. Спасибо за ответ. Я подожду.