Home-theater-designers
Przycisk „przewiń do góry” służy do łatwego powrotu widoku na górę strony. Ta niewielka funkcja UX jest bardzo powszechna w nowoczesnych witrynach internetowych. Jest to szczególnie przydatne w przypadku stron internetowych zawierających dużo treści, takich jak aplikacje jednostronicowe.
jaka piosenka jest w tym filmie?
W tym artykule dowiesz się, jak utworzyć przycisk przewijania do góry za pomocą JavaScript i jQuery.
Jak utworzyć przycisk przewijania do góry za pomocą JavaScript
Możesz dodać do swojej witryny przycisk przewijania do góry, korzystając z następującego fragmentu kodu:
Kod 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.
Tutaj tworzona jest podstawowa struktura strony z fikcyjnymi danymi. Musisz tylko skupić się na przycisku przewijania do góry.
Po kliknięciu tego przycisku strona jest przewijana do góry. Będzie to działać po dodaniu kodu jQuery.
Kod jQuery
Związane z: Dowiedz się, jak stworzyć element w 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');
});Tutaj pokazać klasa jest dodawana do elementu button, jeśli użytkownik przewinie więcej niż 300 pikseli na stronie internetowej. Ten pokazać class sprawia, że element przycisku jest widoczny. Domyślnie widoczność elementu przycisku jest ukryta. Więcej szczegółów na temat przycisku znajduje się w poniższym kodzie CSS.
Kod CSS
Związane z: Proste przykłady kodu CSS, których możesz się nauczyć w 10 minut
#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;
}Powyższy CSS służy do stylizacji przycisku przewijania do góry i strony internetowej. Możesz bawić się kodem CSS i stylizować przycisk zgodnie z własnymi wymaganiami.
Teraz masz w pełni funkcjonalny przycisk przewijania do góry / do góry. Jeśli chcesz zapoznać się z pełnym kodem źródłowym użytym w tym artykule, oto Repozytorium GitHub tego samego.
Notatka : Kod użyty w tym artykule to Licencja MIT .
Dowiedz się więcej o doświadczeniu użytkownika
User experience skupia się na tym, czy produkt spełnia potrzeby użytkowników. Jeśli jesteś projektantem lub programistą, dobrze byłoby przestrzegać zasad projektowania UX i tworzyć niesamowite produkty. Jeśli interesujesz się tym polem, musisz podążać właściwą ścieżką, aby rozpocząć.
czy Xbox One jest tego wart?Udział Udział Ćwierkać E-mail Chcesz zostać projektantem UX? Oto jak zacząć
Zadaniem UX Designera jest zadbanie o to, aby potrzeby użytkownika oprogramowania zostały zaspokojone i aby był zachwycony procesem.
Czytaj dalej Powiązane tematy- Programowanie
- JavaScript
- jQuery
Yuvraj jest studentem informatyki na Uniwersytecie w Delhi w Indiach. Jest pasjonatem Full Stack Web Development. Kiedy nie pisze, bada głębię różnych technologii.
Więcej od Yuvraja ChandraZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować