Делаем скрипт прокрутка вверх на jQuery

Привет. Давно у нас не было каких-то полезностей на 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.

362