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

@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 пикселей. Если да, то появляется кнопка "Наверх". При клике на нее страница плавно прокручивается вверх и скрывает кнопку обратно.

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