Кнопка вверх на jQuery

Кнопка вверх на jquery. Довольно частая задача при разработке сайта. Сегодня мы научимся делать кнопку вверх на jquery.

Сегодня мы с вами научимся делать кнопку вверх на jQuery.

html

Создадим кнопку с 2 классами, первый для оформления, другой для javascript и текстовый узел, который будет визуально обозначать начало страницы.

<p>Content</p>
<div class="up-btn js-scroll-top">Up</div>

css

накинем немного стилей

/*Вспомогательные стили для демонстрации появления кнопки*/
body {
    height: 4000px; /*имитируем много контента на странице*/
}

/*Стили по-умолчанию*/
.up-btn {
    background-color: #444; /*Цвет фона*/
    color: #fff; /*Цвет текста в кнопке*/
    padding: 20px; /*Внутренний отступ*/

    position: fixed; /*Фиксированное позиционирование*/
    bottom: 20px; /*Снизу*/
    right: 20px; /*Справа*/
    cursor: pointer; /*«Рука» при наведении*/

    opacity: 0; /*Прозрачность 0%*/
    visibility: hidden; /*Видимость на странице*/

    transition: .3s all; /*Плавность изменения 3 миллисекунды*/
}

/*Активный класс*/
.up-btn.is-show {
    opacity: 1; /*Прозрачность 100%*/
    visibility: visible; /*Видимость на странице*/
}

/*
Трюк с opacity и visibility нужен, потому что display none и block появляются резко. Им никак не настроишь плавности. А вот opacity и visibility плавность появления настроить можно.
*/

Дали body огромную высоту, для того, чтобы скроллить, это только для примера.

Для кнопки сделали позиционирование внизу справа, по-умолчанию кнопка скрыта. Показывать ее будет дополнительный класс is-show, который мы будем добавлять в js.

javascript

Первое — клик и скроллинг вверх.

(1) Создаем событие клика по классу .js-scroll top
(2) У элемента html и body вызываем функцию. animate и
(3) Анимируем параметр scrollTop: 0
(4) за 1000 мс (1 сек)

Почему scrollTop должен быть 0? Потому, что это означает начало страницы.

$('.js-scroll-top').click(function() { // (1)
     $('html,body').animate({ // (2)
         scrollTop: 0 // (3)
     }, 1000); // (4)
 });

Показ, скрытие кнопки

Какие будут условия для показа и скрытия? Позиция скролла в текущий момент времени. Это мы можем проверить, привязав событие scroll на window — окно браузера.

$(window).scroll(function() {

});

Теперь при прокрутке мы должны получать позицию скролла. Это можно сделать с помощью метода. scrollTop ()

$(window).scrollTop()

if (Если расстояние сверху больше, чем 200 пикселей) {
    добавляем класс, который показывает кнопку
} else {
    удаляем класс, который показывает кнопку        
}

if ($(window).scrollTop() > 200) {
   $('.js-scroll-top').addClass('is-show');
} else {
   $('.js-scroll-top').removeClass('is-show');
}

Все вместе

$('.js-scroll-top').click(function() {
   $('html,body').animate({
       scrollTop: 0
    }, 1000);
});

$(window).scroll(function() {
   if ($(window).scrollTop() > 200) {
     $('.js-scroll-top').addClass('is-show');
   } else {
     $('.js-scroll-top').removeClass('is-show');
   }
});

Демо: