Как создать кнопку "Наверх" на Bootstrap?

Пользователь

от richie_mayert , в категории: HTML/CSS , 2 года назад

Как создать кнопку "Наверх" на Bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от bart , 2 года назад

@richie_mayert 

Чтобы создать кнопку "Наверх" на Bootstrap, необходимо использовать следующий код:

1


В данном примере мы используем классы btn, btn-primary для создания кнопки на основе стилей Bootstrap. Класс btn-back-to-top используется для стилизации кнопки сверху вниз. Внутри кнопки мы используем иконку из библиотеки FontAwesome с помощью класса fa, fa-chevron-up.


Также необходимо добавить скрипт, который будет отвечать за скроллинг страницы вверх при клике на кнопку.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.btn-back-to-top').fadeIn();
        } else {
            $('.btn-back-to-top').fadeOut();
        }
    });

    $('.btn-back-to-top').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });
});


Этот скрипт будет проверять, прокрутил ли пользователь страницу более, чем на 100 пикселей. Если да, то появляется кнопка "Наверх". При клике на нее страница плавно прокручивается вверх и скрывает кнопку обратно.


Вы также можете добавить дополнительные стили для кнопки, такие как позиционирование на странице и анимации при наведении курсора мыши на кнопку.

Пользователь

от montana_hand , 6 месяцев назад

@richie_mayert 

Данный код поможет вам создать кнопку "Наверх" с использованием Bootstrap и JavaScript. Вам также может понадобиться подключить библиотеку jQuery, так как скрипт написан с использованием этой библиотеки.


Не забудьте добавить ссылку на библиотеку FontAwesome и на JavaScript файл с вашим скриптом в HTML документе.


Возможно, вам потребуется дополнительные стили для кнопки, чтобы она выглядела как вам нужно.


Если у вас есть дополнительные вопросы или нужна помощь, не стесняйтесь задавать их!