Меню
Оставить заявку

Кнопка вверх на 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;
    visibility: hidden;

    transition: .3s all;
}

.up-btn.is-show {
    opacity: 1;
    visibility: visible;
}

Дали 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');
   }
});

Демо:

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

Спасибо за прочтение статьи!

Если материал был полезен для тебя — напиши «спасибо» в комментариях, это займет 30 секунд. Сделаешь приятно 🙂 Спасибо!

Если у тебя есть замечания, пожелания, предложения — можешь так же написать их в комментариях. Я рад новым мнениям и критике.

Похожие статьи

Плавный скролл на jQuery

Поделиться
Отправить

Есть заказ, но не времени?

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

Все по честному! Ты передаешь мне заказ, и с оплаты заказа получаешь кэшбек 15%.

Я работаю по такой же схеме: я могу передавать тебе заказы за 15% кэшбэка. Выгоднее обмениваться заказами, а не терять их. Мои партнеры заработали с моими заказами более 100 000 рублей.

Переходи на страницу контакты и напиши туда, где удобнее будет общаться.

Обсудить партнерство

Комментарии