Ставший уже привычным элемент навигации внутри страницы — кнопка «Вернуться к началу страницы». Разберем как реализовать эту функцию.
План следующий:
- Создать HTML код кнопки;
- (БОНУС) Прятать кнопку, если мы и так уже в самом верху страницы.
- Подключить к ней обработчик события нажатия (on click);
- Реализовать плавную анимацию скролла к началу страницы;
Что нам еще понадобится с технической точки зрения? Я буду пользоваться библиотекой jQuery, для сокращения js кода.
HTML код кнопки «Вверх»
Кнопка в нашем случае — это любой HTML контейнер, но для удобства последующей кастомизации, я использую подход wrapper + container, что на практике означает, что я создаю сразу два контейнера. Один из которых (wrapper) используется для позиционирования кнопки, а второй — для самой кнопки (container).
Получается следующий код и некоторые стили:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="uptotop"> <a href="#" title="К началу">Наверх</a> </div> <style> .uptotop { position: fixed; right: 0; bottom: 0; } </style> |
Роль контейнера будет выполнять тег <A>. А позиционирующий элемент div.uptotop в нашем примере фиксирует положение кнопки внизу-справа на экране.
Прячем кнопку, пока мы вверху страницы
Для реализации «бонуса» мы будем добавлять/убирать у кнопки определенный html класс, назовем его .show.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> .uptotop { position: fixed; right: 0; bottom: 0; } .uptotop a { display: none; } .uptotop a.show { display: block; } </style> |
Т.е. изначально кнопка спрятана, и будет видна только если мы добавим ей класс .show. Нужен скрипт, который отслеживает состояние скролла.
|
1 2 3 4 5 6 7 8 9 10 11 |
<sctipt> $(window).scroll(function(event) { var st = $(this).scrollTop(); if (st > 300) { $('.uptotop').addClass('show'); } else { $('.uptotop').removeClass('show'); } }); </script> |
В скрипте условие st > 300 означает, что мы опустились ниже 300 точек от начала документа. Мы можете соответственно изменить эту константу, для ваших нужд.
Подключаем обработчик на кнопку
Код не сложен, посмотрим и разберем его:
|
1 2 3 4 5 6 |
<script> $('.uptotop').once().click(function (e) { e.preventDefault(); $('html, body').scrollTop(0); }); </script> |
Для начала мы блокируем обработчики по умолчанию, а затем выполняем перемотку к вертикальной позиции со значением 0, т.е. на самый верх страницы.
Но перемотка происходит мгновенно, что совсем не из области юзер-френдли.
Плавная анимация скролла вверх
Тут нам сильно поможет jQuery, который предоставляет мощную хелпер-функцию animate().
|
1 2 3 4 5 6 |
<script> $('.uptotop').once().click(function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 500); }); </script> |
С её помощью мы меняем параметр scrollTop не сразу, а в течении какого то времени. В примере я задал 500 мс.
Всё вместе
Здесь соберем весь код из рассмотренных выше кусочков. Я не стал добавлять сюда обязательные для <html> документа теги, чтобы не засорять код.
Нужно подключить также jQuery, а стили и скрипты лучше вынести в отдельные файлы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="uptotop"> <a href="#" title="К началу">Наверх</a> </div> <style> .uptotop { position: fixed; right: 0; bottom: 0; } .uptotop a { display: none; } .uptotop a.show { display: block; } </style> <script> $(window).scroll(function(event) { var st = $(this).scrollTop(); if (st > 300) { $('.uptotop').addClass('show'); } else { $('.uptotop').removeClass('show'); } }); $('.uptotop').once().click(function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 500); }); </script> |
В данной тематике, возможно, вас заинтересует еще один пример — перемотка страницы к позиции определенного контейнера.