Как создать кнопку «наверх» для сайта

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

В этом уроке мы разберем пример реализации такой кнопки на jQuery.  Данная кнопка будет динамически появляться, и исчезать при прокрутке страницы. А при клике по кнопке, страница просматриваемая пользователем, будет плавно прокручена до самого верха.

Смотреть видеоурок

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

Добавить комментарий

  • Хочу ещё задать вопрос, нигде не могу найти информацию. При установке скрипта jquery перестает работать выпадающее меню подрубрик. Александр, может подскажете, что можно сделать в этом случае?

  • У меня на сайте перестал работать плагин "Back to top" в связи с обновление движка. Решил сделать "Кнопку вверх" без плагина. Изучил достаточно много информации на эту тему, но так наглядно и доходчиво (да еще с доп. материалами) нашел у только Александра. Вставил код, подкорректировал стили под сайт- все работает! Благодарю за урок!

  • Я к Александру обратился чтобы…НАУЧИТЬСЯ создавать сайты!))
    А тут предлагают просто скачать, вставить и пользоваться той кнопкой которая у всех будет. У меня просьба будет. Объясните пожалуйста первый код

  • 15.09.2014 23:46

    Александр Спасибо!!!

  • Блин, да кто-нибудь ответит мне на этот вопрос?

    • Святослав, укажите полный путь до картинки (Например, http://yoursite.ru/images/top.jpg) и тогда у вас точно не возникнет проблем с отображением изображения.

    • Александр Пауков, Ок. Спасибо.

    • Александр Пауков, Всё равно не работает путь к картинке. Блог стоит пока на локальном хосте. Не понимаю в чём проблема!

    • Александр Пауков, Ура!!! Наконец то разобрался!!! Сори, что заспамил)

  • Не могу понять, какой путь указывать

  • у меня не работает тег img. Что я не правильно делаю? Как это прописать?

  • Спасибо,все работает.