@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 пикселей. Если да, то появляется кнопка "Наверх". При клике на нее страница плавно прокручивается вверх и скрывает кнопку обратно.
Вы также можете добавить дополнительные стили для кнопки, такие как позиционирование на странице и анимации при наведении курсора мыши на кнопку.
@richie_mayert
Данный код поможет вам создать кнопку "Наверх" с использованием Bootstrap и JavaScript. Вам также может понадобиться подключить библиотеку jQuery, так как скрипт написан с использованием этой библиотеки.
Не забудьте добавить ссылку на библиотеку FontAwesome и на JavaScript файл с вашим скриптом в HTML документе.
Возможно, вам потребуется дополнительные стили для кнопки, чтобы она выглядела как вам нужно.
Если у вас есть дополнительные вопросы или нужна помощь, не стесняйтесь задавать их!