Привет. Давно у нас не было каких-то полезностей на jQuery. Сегодня делаем скрипт прокрутка вверх на jQuery. Это нужно практически на каждом сайте, а использовать для этого сторонний плагин с горой ненужного кода – не очень хочется.
Если же сама тема создания сайта для вас не очень интересна, то создание сайта под ключ от профессионалов – отличное решение.
Как сделать скрипт прокрутка вверх на jQuery
Начнем с простого, HTML:
<div class='scrolltotop'></div>
Это код самой кнопки, который нужно добавить в HTML.
Перейдём к CSS, опишем стиль кнопки, сделаем её статично справа внизу, полупрозрачной, с тенью, круглой и чтобы при наведении она становилась более заметной.
Как видите, чтобы не добавлять символ стрелочки в HTML, и тем самым упростить верстку, мы добавили его через CSS. Кроме того, на CSS у нас описано всё для кнопки – она круглая с тенью, зафиксирована справа внизу, при наведении становится более заметной.
С CSS закончили. Теперь разберемся с jQuery. От jQuery у нас зависит 2 вещи:
- определение показывать кнопку “наверх” или нет (зависит от степени прокрутки страницы)
- собственно плавная прокрутка страницы вверх при нажатии на кнопку
Так и сделаем:
Сначала мы назначаем обработчик события прокрутки страницы, и делаем в нём проверку: если страница прокручена больше, чем размер экрана, то уже можно показывать кнопку “наверх”, если же страница прокручена меньше – то наоборот скрываем.
Затем добавляем обработчик события клика на нашу кнопку “наверх”. В нём мы анимируем свойство scrollTop одновременно у html и body (для кроссбраузерности).
Готово, кнопка наверх – работает.
Посмотреть результат можно тут:
Изначально кнопку не видно, нужно немного поскролить область с превью (чтобы сработал обработчик и проверка).
Вы можете смело устанавливать этот код на сайт, и будете приятно удивлены, что он работает и не требует дополнительных плагинов и скриптов. Только несколько строчек кода на JS, CSS и всего одна строчка на HTML (кстати, без HTML тоже можно обойтись, и использовать только JS, на нем же добавить кнопку уже после загрузки страницы).
Весь код из статьи доступен на jsfiddle.
Также рекомендуем прочитать:
Купите мне кофе