Home-theater-designers
Кнопка прокрутки вверх используется, чтобы легко вернуться в верхнюю часть страницы. Эта небольшая функция UX очень распространена на современных веб-сайтах. Это особенно полезно для веб-страниц с большим количеством контента, например для одностраничных приложений.
Apple Watch Series 3 против 6
В этой статье вы узнаете, как создать кнопку с прокруткой вверх с помощью JavaScript и jQuery.
Как создать кнопку прокрутки вверх с помощью JavaScript
Вы можете добавить на свой веб-сайт кнопку с прокруткой вверх, используя следующий фрагмент кода:
HTML код
Scroll-to-Top button using JavaScript
Scroll down the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Здесь создается базовая структура веб-страницы с фиктивными данными. Вам нужно только сосредоточиться на кнопке прокрутки вверх.
При нажатии этой кнопки страница прокручивается вверх. Это будет работать после добавления кода jQuery.
Код jQuery
Связанный: Узнайте, как создать элемент в jQuery
// ===== Scroll to Top ====
var btn = $('#button');
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the button
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});Здесь Показать Класс добавляется к элементу кнопки, если пользователь прокручивает веб-страницу более чем на 300 пикселей. Этот Показать делает видимым элемент кнопки. По умолчанию видимость элемента кнопки скрыта. Более подробная информация о кнопке содержится в следующем коде CSS.
Код CSS
Связанный: Простые примеры кода CSS, которые вы можете изучить за 10 минут
#button {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: 'f077';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
/* Styles for the content section */
.content {
width: 77%;
margin: 50px auto;
font-family: 'Merriweather', serif;
font-size: 17px;
color: #6c767a;
line-height: 1.9;
}
@media (min-width: 500px) {
.content {
width: 43%;
}
#button {
margin: 30px;
}
}
.content h1 {
margin-bottom: -10px;
color: #03a9f4;
line-height: 1.5;
}
.content h3 {
font-style: italic;
color: #96a2a7;
}Приведенный выше CSS используется для стилизации кнопки прокрутки вверх и веб-страницы. Вы можете поиграть с кодом CSS и настроить кнопку в соответствии со своими требованиями.
Теперь у вас есть полностью функциональная кнопка прокрутки вверх / назад. Если вы хотите взглянуть на полный исходный код, использованный в этой статье, вот Репозиторий GitHub того же самого.
Примечание : Код, используемый в этой статье, Лицензия MIT .
Узнать больше о пользовательском опыте
Пользовательский опыт фокусируется на том, соответствует ли продукт потребностям своих пользователей. Если вы дизайнер или разработчик, вам следует следовать принципам UX-дизайна и создавать потрясающие продукты. Если это поле вас интересует, вы должны следовать правильному пути, чтобы начать работу.
как подключить Nintendo Switch к телевизору без док-станцииДелиться Делиться Твитнуть Эл. адрес Хотите стать дизайнером UX? Вот как начать
Задача дизайнера UX - убедиться, что потребности пользователей программного обеспечения учтены и что они довольны процессом.
Читать далее Похожие темы- Программирование
- JavaScript
- jQuery
Юврадж - студент бакалавриата по информатике в Университете Дели, Индия. Он увлечен веб-разработкой Full Stack. Когда он не пишет, он исследует глубину различных технологий.
Ещё от Yuvraj ChandraПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться