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

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

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

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

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

Понравилась статья?

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

Комментарии ВКонтакте

Добавить комментарийКомментариев (12)

Андрей 26 декабря 2015 г. в 21:47

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

Ответить

Андрей 23 декабря 2015 г. в 22:46

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

Ответить

Вильдан 30 октября 2015 г. в 18:04

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

Ответить

Арам 15 сентября 2014 г. в 23:46

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

Ответить

Святослав 28 марта 2014 г. в 20:40

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

Ответить
Показать все комментарии

Александр Пауков 29 марта 2014 г. в 13:02

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

Ответить

Святослав 29 марта 2014 г. в 15:08

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

Ответить

Святослав 29 марта 2014 г. в 16:21

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

Ответить

Святослав 29 марта 2014 г. в 16:32

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

Ответить

Святослав 28 марта 2014 г. в 20:28

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

Ответить

Святослав 28 марта 2014 г. в 20:11

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

Ответить

Артем 25 октября 2013 г. в 18:49

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

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

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

« Вернуться назад