Home-theater-designers
Бутон „превъртане нагоре“ се използва за лесно връщане на изгледа ви в горната част на страницата. Тази малка UX функция е много често срещана в съвременните уебсайтове. Това е особено полезно за уеб страници, които имат много съдържание, като приложения на една страница.
как да прехвърляте спестени пари между компютри
В тази статия ще научите как да създадете бутон за превъртане нагоре с помощта на 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 пиксела на уеб страницата. Това шоу class прави елемента на бутона видим. По подразбиране видимостта на елемента на бутона се скрива. Повече подробности за бутона са в следния 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 дизайн и да създавате страхотни продукти. Ако това поле ви интересува, трябва да следвате правилния път, за да започнете.
как да изтеглите всички снимки от фейсбукДял Дял Туит електронна поща Искате ли да бъдете UX дизайнер? Ето как да започнете
Работата на UX Designer е да се погрижи за нуждите на потребителя на софтуера и да бъде доволен от процеса.
Прочетете Напред Свързани теми- Програмиране
- JavaScript
- jQuery
Юврадж е студент по компютърни науки в Университета в Делхи, Индия. Той е страстен за Full Stack Web Development. Когато не пише, изследва дълбочината на различните технологии.
Още от Yuvraj ChandraАбонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате