Как сделать кнопку наверх (вверх) с помощью html и css, позиция

С сегодняшнем wordpress уроке я расскажу вам о том, как можно легко и быстро сделать кнопку ” Наверх ” у себя на сайте.

вверх

Все делается довольно примитивно! И так, начинаем..

Хочу сразу сказать, что для оптимизации и ускорения работы сайта мы обойдемся без использования плагинов!

Первым делом скачиваем Этот архив – в нем находятся три файла:

Первый файл – это картинка наверх (top.gif);

Второй и третий файл – это два бонуса (зеленая и синяя кнопка).

Разархивируем Zip архив и зальем один из файлов (картинку) в корень сайта. (хотя можно и в любое другое место)
У меня она располагаются по следующему адресу:

http://sergey-oganesyan.ru/top.gif

Теперь заходим в админку блога :: Дизайн :: Редактор , выбираем footer.php (нижняя часть сайта) и помещаем вот этот код между тегами <body> </body> (для поиска по странице нажмите Ctrl + F);

<noindex><a href="#" id="toTop"><img src="http://ваш сайт.ru/top.gif" />

Внимание: http://ваш сайт.ru/ – замените на адрес вашего сайта;

После этого обновляем шаблон и переходим к файлу шаблона под названием style.css (Список стилей) и в самый низ добавляем этот код:

#toTop {     
      width: 100px;     
      background: #ededed;     
      border: 0px solid #cccccc;     
      text-align: center;     
      padding: 5px;     
      position: fixed;     
      bottom: 10px;     
      right: 10px;     
 }

Обновляем шаблон.

При желании, вы можете изменит стиль вашей кнопки:

width: – ширина кнопка в пикселях;
background: – цвет фона;
border: толщина и цвет рамки;
text-align: выравнивание текста (стандартно – по центру);
padding: отступ (в пикселях)
position: – позиция (стандартно – фиксированная);
bottom: 10px;
right: – отступ от правого края;

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

На этом все, подписывайтесь на обновления, с вами был Виталий Admin. До новых встреч!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.

Как сделать кнопку наверх (вверх) с помощью html и css, позиция: 14 комментариев

  1. Oleg

    Все можно сделать гораздо проще. Просто вставляем в нужное место такую хеш-ссылку, где прописываем путь к нашей картинке: ”Наверх”

    1. Виталий Admin

      Спасибо, возьму на заметку, а как будет происходить подъем вверх, резко или плавно?

      1. Oleg

        Будет резко. Во всяком случае у меня так было.

        1. Виталий Admin

          А мне так даже больше нравится – экономия времени.

  2. Анни

    Добрый день! спасибо за полезную инструкцию, сделала кнопочку, только не могу разобраться в коде – что изменить, чтобы она была не справа, как у вас и как у меня сейчас, а слева? Заранее спасибо за ответ!

    1. Виталий Admin

      Здравствуйте! Для этого просто замените это: #toTop { width: 100px; background: #ededed; border: 0px solid #cccccc; text-align: center; padding: 5px; position: fixed; bottom: 10px; right: 10px; cursor: pointer; color: #666666; text-decoration: none;} На это: #toTop { width: 100px; background: #ededed; border: 0px solid #cccccc; text-align: center; padding: 5px; position: fixed; bottom: 10px; left: 10px; cursor: pointer; color: #666666; text-decoration: none;} Это ток кусочек кода, который ранее вы вставляли в файл style.css (Список стилей). Если есть вопросы на счет позиции кнопки вверх, например, как её сделать чуть левее или выше, пишите.

  3. Олег

    Поставил себе всетаки с плагином. Быстро и удобно. Только поиенял картинку. Не нравилось, что кнопка не исчезает в верхнем положении страницы.

    1. Виталий Admin

      А мне как-то так нравится, да и то, что не исчезает тоже ничего – дизайну не вредит.

  4. Димитрий

    проблема в том, что если нахожусь не на главной странице, не только вверх поднимает, но и возвращает на главную, что не есть хорошо:-(

  5. Димитрий

    Всё..уже разобрался, просто id=”toTop”> стояло в конце

  6. Anna

    Виталий, вот вы всё описываете, а где у вас на сайте это можно посмотреть? Ведь кнопочки у вас я не вижу?

    1. Виталий Admin

      Все верно, именно такой, как в статье, кнопочки нет.

  7. Anna

    Виталий, извините, не досмотрела до самого конца страницу. Кнопочка есть, только она сливается с фоном.

    1. Виталий Admin

      Кнопочка есть, но эта не та кнопка, которая описана в статье. Раньше была такая кнопочка, но потом сменил дизайн.

Обсуждение закрыто.