Профессиональное обучение
блоггингу от А до Я

Как сделать кнопку «наверх» на сайте или блоге?




Кнопка наверх на блоге

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

Кнопка наверх

Сегодня, в своем коротеньком посте я расскажу вам как можно сделать у себя на сайте или блоге маленькую кнопку, нажав на которую пользователя будет перекидывать в самый вверх той страницы на которой он находится.

Сидит как-то моя девушка Юля, читает статью на моем блоге и говорит, — «Саш, а почему бы тебе не поставить на блог кнопку „наверх“ как на сайте вконтакте? У тебя статьи в основном такие длинные на блоге и когда читаешь пост до конца, потом приходится очень долго крутить колесико мыши, чтобы наверх добраться. =)

Если бы кнопку поставил было бы вообще здорово. Прочитал, нажал на кнопку „наверх“ и ты в начале блога где главное меню в твоем распоряжении!»

Ну что же, надо так надо! Будем ставить кнопку. Я думаю вы уже заметили ее на блоге. Итак. Если вы хотите чтобы на вашем сайте или блоге сверкала такая же кнопка, то делается это в три простых шага:

1. Скачайте вот этот архив с двумя файлами. Первый — это сама картинка (verx.gif). Второй — это файл скрипта (verx.js).

Оба этих файла вам нужно закачать на ваш сервер. Я лично положил картинку в папку images своего блога, а файл verx.js в корень блога. Если кто не знает, что такое корень блога, объясню: корень блога это главная папка, в которой лежат все файлы и папки (в основном это httpdocs или public_html).




2. Скопируйте вот этот код:

<a id="toTop" href="#">Наверх</a><script type="text/javascript" src="http://ваш_сайт.ru/verx.js"></script><script type="text/javascript">// <![CDATA[
$(function() {      $("#toTop").scrollToTop();      });
// ]]></script>

и вставьте его в главном файле вашего сайта. В основном это index.html, index.php. Для блога — это файл header.php, но советую вставить в файл footer.php в тело. (между тегами <body></body>) Не забудьте вместо ваш_сайт.ru подставить адрес вашего сайта.

3. Откройте файл таблицы стилей вашего шаблона сайта или темы блога style.css Для блога wordpress этот файл находится в папке с темой (wp-content/themes/ваша_тема/style.css) и вставьте в самый конец вот этот код:

#toTop {     
      width: 100px;     
      background: #f1f1f1;     
      border: 1px solid #cccccc;     
      text-align: center;     
      padding: 5px;     
      position: fixed;     
      bottom: 10px;     
      right: 10px;     
      cursor: pointer;     
      color: #666666;     
      text-decoration: none;}

Готово! Обновите страницу вашего сайта или блога и кнопка Наверх должна будет появляться в правом нижнем углу тогда, когда вы будете спускаться вниз страницы.

Если вы захотите сделать кнопку с другим дизайном, то можете изменить картинку или пофантазировать в style.css меняя цвета, шрифт и т.д...

На этом у меня все! Думаю статья была полезна для вас!

С уважением, Александр Борисов

Этот блог читают уже более 6000 человек
- читай и ТЫ!
Нажимая на кнопку "Получать статьи", я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.
комментариев 80
  1. Юки

    Я тоже хочу себе на блог такую кнопочку 😉

    в 21:36 | Ответить
  2. Антон Лукьянов

    Кнопка это конечно хорошо, но я бы сказал немного по другому...

    Я тоже хочу себе такую девочку!! =)

    в 23:43 | Ответить
  3. Ольга

    Спасибо большущее! Пригодится =)

    в 05:20 | Ответить
  4. Бабай

    Все сделал по инструкции  кнопка появилась, но только с надписью НАВЕРХ, а стрелки нет, картинку положил в папку

    images темы.

    в 08:40 | Ответить
  5. Бабай

    Потом у вас плавно двигается вверх а у меня почему то резко.

    в 08:43 | Ответить
  6. Александр Борисов

    В папку images надо ложить в корень блога а не папку темы. 

    По поводу скорости не знаю даже!

    в 08:49 | Ответить
  7. Андрей

    Я прокрутку сделал с помощью плагина  Scroll to Top . Все настройки уже в плагине. Устанавливаем, активируем. Картинки кнопок прилагаются в плагине =)

    в 18:03 | Ответить
  8. Дмитрий Канев

    Бабай, а вы создайте эту папку.

    Александр, у меня кнопка почему-то сразу видна, а не так как у вас на блоге, только при прокрутке вниз появляется.

    в 18:28 | Ответить
  9. Елена

    спасибо, обязательно поставлю :)

    в 18:15 | Ответить
  10. Олег

    Класс! Спасибо за инфу, Александр!

    в 18:27 | Ответить
  11. олеся

    отлично, вот я и нашла, что искала O=) ) только это внезапное появление страницы слегка раздражает)

    в 20:00 | Ответить
  12. Виталий

    А в IE8 не работает... 🙁

    в 22:55 | Ответить
  13. Фарит

    Спасибо, получилось, только как правильно заметил Виталий не работает в IE 8 и IE 9, а у вас в блоге работал в обоих случаях.

    И куда стрелочка теперь с вашего блога делась?

    в 18:14 | Ответить
  14. Александр Борисов

    Ребята мне кажется все зависит от шаблона сайта или блога. Дело не в скрипте, а том как он подходит вашему сайту. У меня значит хорошо работает!

    Фарит. Я убрал кнопку пока, все не нужные баннеры, рекламу и т.д. Жду ответа от Яндекса. Хочу в каталог попасть! =)

    в 19:05 | Ответить
  15. Наталья

    Спасибо огромное и за кнопочку и особенно за девочку! Потрясающая девочка!

    в 20:56 | Ответить
  16. Дмитрий Канев

    Я понял почему у меня кнопка не исчезала, все дело в том что нужно подключать jquery библиотеку. Теперь все замчательно работает.

    в 19:55 | Ответить
    • Тимур

      Будьте добры! Сообщите мне код этой библиотеки. Я тоже хочу, чтобы она исчезала по мере продвижения вверх. Заранее благодарю.

      в 10:12 | Ответить
  17. Nch

    поставил, просмотрел в 4 браузерах , дак везде по разному отображается  🙁

    в общем коряво блин

    в 12:24 | Ответить
  18. Роман

    а как сделать такую же кнопку, ( я имею ввиду прилипшую ) только чтоб при нажатии на нее , осуществлялся переход на какую либо определенную страницу сайта ?

    в 02:45 | Ответить
  19. Bogdan

    Здраствуйте! Все зделал как написано но у меня на сайте сначала когда заходиш кнопку выбевает просто где попало но когда обновиш страницу начинает показывать где нужно...И так кожный раз ...Что делать???

    в 21:25 | Ответить
  20. Андрей

    Bogdan можешь поробовать плагины Go-to-Top или  Scroll to Top они очень просто устанавливаются и работают нормально. Один минус, что это плагины, а лишние не все хотят ставить =)

     

    в 14:34 | Ответить
  21. Ренат

    Отличная статья, всё получилось)))

    Спасибо 😉

    в 20:59 | Ответить
  22. Альберт

    Спасибо, Александр. Нужная кнопка в нужном месте. Главное — экономия времени.

    в 14:19 | Ответить
  23. Дмитрий

    Спасибо большое, у вас самый простой способ) Разместил у себя такую кнопку и в посте про эту кнопку указал ваш сайт 😉

    в 06:01 | Ответить
  24. Дмитрий

    Хотел спросить у вас: пользуюсь Гугл Хром, а в Мозилле стрелка отображается с символичным прямоугольником. Задал значение прозрачности, но прозрачность применилась ко всему объекту. Подскажите, как быть?)

    в 20:25 | Ответить
  25. облиза

    блин наконец то хоть кто-то описал все подробно. поставил все робит. спасибо *DRINK*

    в 17:17 | Ответить
  26. Irina

    Здравствуйте, Александр!

    Вопрос к пункту 2 описанных 3 шагов: в файле footer.php своего шаблона не нашла вообще тегов <body></body>.

    Куда именно в файле header.php вставить в таком случае код?

     

    Спасибо за ответ.

    в 01:31 | Ответить
  27. Irina

    Не дождавшись ответа, внесла таки код в файл footer.php своего шаблона, хоть и не нашла там тегов <body></body>. Работает. Не отображается, правда, картинка, только текст. Но и так хорошо. Это, я так понимаю, зависит от темы.

    В общем, спасибо большое: внятное и дельное объяснение.  =)

     

     

    в 13:16 | Ответить
  28. mihail

    спасибо, кнопку сделал. но не понимаю как ее в левый угол переместить. %)

    в 19:34 | Ответить
  29. Влад

    Всё получилось , но теперь одна проблема. Почему когда я в самом верху сайта , кнопка всё равно видна?

    в 11:37 | Ответить
  30. Анастасия

    Кнопку установить не могу, где корень и куда размещать к сожалению пока не знаю. А вот через плагин Scroll to Top установила очень приятная функция. Только подскажите, кто может, как заменить слова в этой кнопочке на «наверх» например, потому как так и пишут «scroll to top»

    в 07:48 | Ответить
  31. Максим

    Спасибо огромное!  *CRAZY*

    в 17:34 | Ответить
  32. Максим

    Я конечно очень благодарен админу, но не могли бы вы объяснить как сделать одну стрелочку, без серого квадрата с надписью Наверх и чтобы она появлялась при спускании вниз, а не весела постоянно. 

    Заранее огромное спасибо. =)  

    в 18:06 | Ответить
  33. Андрей

    А как сделать кнопку вниз?

    в 16:42 | Ответить
  34. Елена

    Все получилось, спасибо. Только самому копать приходиться. Я не нашла, где картинка в коде фигурирует.

    А свои ссылки пропихивать без предупреждения — :-/ . 

    в 01:02 | Ответить
  35. psevdonim

    =) Это видимо на защиту от копипаста Елена жалуется ))))

    Действительно, не очень удобно, что она срабатывает даже при копировании кода, но чем то всегда приходится жертвовать. )

    в 22:58 | Ответить
  36. Руслан

    Установил код, но... ничего! Абсолютно никаких сдвигов.

    в 08:06 | Ответить
  37. Женёк

    спасибо чел реально помогло

    в 14:41 | Ответить
  38. Александр

    Кнопочку поставил,всё работает, а что сделать чтобы кнопка только после прокрутки появлялась? это уже jQuery пользовать надо?

    в 15:06 | Ответить
  39. Татьяна Ширякова

    А я тоже плагин поставила и не парюсь  :-D

    в 10:57 | Ответить
  40. Юрий

    Спасибо! ;-)

    в 23:55 | Ответить
  41. Denis

    Спасибо, как раз то, что искал.

    в 15:05 | Ответить
  42. mrs.interesno

    Спасибо за подсказку. [good]

    А как такие смайлики, как у вас поставить.

    в 01:08 | Ответить
  43. mrs.interesno

    Кнопку поставила, но только текст отображается, как у многих здесь.

    Создала в корне папку Images, но это не помогло. [:--_)]

    в 13:16 | Ответить
  44. Самостоятельный путешественник

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

    в 06:42 | Ответить
  45. Mixail

    здравствуйте! за кнопку спасибо. все работает, но без картинки (как у многих). я в css фон кнопке сделал (меняющийся при hover). вот только подскажите, как сделать чтобы она появлялась не при !=0 , а чуть пониже

    в 07:39 | Ответить
  46. Никита Рябин

    У меня такая кнопка уже встроена с самого начала, так как она уже есть в дизайне.

    в 18:33 | Ответить
  47. Кащей

    Вот она jquery добавляете в код странички html (плавная прокрутка и исчезает) —

    в 11:29 | Ответить
  48. Кирилл

    Сейчас попробую эту фишечку на своем блоге

    в 16:38 | Ответить
  49. Вячеслав Балашов

    Я использовал плагин Scroll to Top, но хочу попробовать поставить кнопку по вашему методу — лишний плагин мне ни к чему.

    Спасибо за полную инструкцию!

    в 20:21 | Ответить
  50. Дмитрий Чернявский

    Я вот тоже на одном из сайтов пользовался Scroll to Top, уже тоже по тихоньку исключаю все плагины , которые можно заменить. :)

    в 18:37 | Ответить
  51. Айкануш

    Спасибо Александр, кнопка сработала!!! :-D

    в 22:48 | Ответить
  52. Галина

    Спасибо! Пришло время и мне такую кнопочку ставить =) Пошла, желаю себе удачи =) В прошлый раз эксперимент с кнопками пришлось завершить походом к фрилансерам =)

    в 14:41 | Ответить
  53. Араби

    Здравствуйте, Александр. Спасибо за статью. Но, думаю, легче установить плагин scroll to top, а текст, его цвет и цвет фона можно поменять в: админка WordPress –> Параметры –> Scroll to Top.

    в 02:01 | Ответить
  54. Денис

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

    в 15:35 | Ответить
  55. Галина

    Спасибо!

    в 16:19 | Ответить
  56. Марио

    сайт отличный ,но где кнопка

    в 20:19 | Ответить
  57. олег дубров

    стрелка не появляется, потому что не прописан путь к к картинке. Саша пропиши путь в коде. Извеняюсь за поправку.

    в 16:16 | Ответить
    • Александр

      Согласен с вами, Олег. Подскажите пожалуйста где его(путь к картинке) нужно прописать.

      Заранее благодарен!

      в 15:05 | Ответить
  58. олег дубров

    блин где картинка стрелки, почему мой комент удалили?

    Не, ну если стрелка обещана, то пчему не написать пост правильно, чтоб стрелка отабражалась.

    в 01:26 | Ответить
  59. Марио

    поменял в мониторе размер экрана и кнопка наверх появилась.Где Жорик)))Жорик спрятал,вот малай)))

    в 17:15 | Ответить
  60. леонид

    здравствуйте а есть ли какая нибудь альтернатива этому способу

    в 14:38 | Ответить
  61. Андрей

    Спасибо пригодилось.

    в 20:25 | Ответить
  62. МихаилUA

    Доброе время суток Александр и всем посетителям блога !

    Мне повезло , я нашол тему с встроенной этой функцией.

    А на другом своём блоге я воспользовался плагином.

    За статью благодарен.

    [good]

    в 19:50 | Ответить
  63. Александр

    Отличный способ сделать кнопку вверх. Плагинами не хочется нагружать лишний раз. Так что обязательно сделаю все как написано в данном посте. очередной раз спасибо за полезную и необходимую информацию!

    в 07:53 | Ответить
  64. Данила

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

    в 12:20 | Ответить
  65. Марат

    Вместо стрелки у меня просто надпись: Наверх. Почему?

    в 16:07 | Ответить
  66. Андрей

    Привет Александр! Установил кнопку, но она не правильно отображается стрелочки нет, а так в принципе лучше чем с плагином ;-)

    в 19:08 | Ответить
  67. Дмитрий

    Спасибо. Очень полезная кнопка для сайта. :)

    в 00:09 | Ответить
  68. Александр

    Давно хотел такую кнопку поставить, думал, что это сложно. А у тебя, Александр, нашел внятное руководство как сделать. Завтра надо сделать. Сегодня уже спать пора. Спасибо. ;-)

    в 21:10 | Ответить
  69. Лев

    так как насчет — где выставить чтобы она появлялась не сразу как только страница спустится, а пониже, а так же где выставляется скорость подъема ?

    в 10:13 | Ответить
    • Жандос Мукатаев

      Посмотрите на стили. У кнопки фиксированная позиция, и она находится на расстоянии снизу 10 пикселей и справа 10 пикселей. Можно поменять на нужный...

      в 15:13 | Ответить
  70. Ирина

    У меня тоже стрелочки нет, только надпись и причём она не справа как у всех, а слева и видно её только в самом конце страницы((

    в 21:50 | Ответить
  71. Pavel

    Подскажите где прописать путь к картинке, чтобы она появилась? [:-|]

    в 22:43 | Ответить
  72. Евгений

    Сделал как все написано, пришлось дописать путь к стрелке. Но она внизу находится как вкопанная, а не появляется плавно. Может кто подскажет как исправить?

    в 02:16 | Ответить
  73. Илья

    Полезнейшая статья! Долго искал материал, как поменять кнопку вверх. Спасибо, Александр!

    в 12:20 | Ответить
  74. Иван

    А почему в мобильной версии блога нет кнопки вверх?

    в 15:28 | Ответить
  75. Александр

    Не работает к сожалению. Сделал всё как у Вас написано. По шагам.

    Что может быть не так?

    в 17:19 | Ответить
  76. Андрей

    На моем шаблоне не работает. Но все равно Спасибо!

    в 16:26 | Ответить
Оставить комментарий: (ПРОЧТИ ЭТО!!!)
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]
Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.