Home-theater-designers
Un buton „scroll-to-top” este utilizat pentru a vă readuce vizualizarea în partea de sus a paginii cu ușurință. Această mică caracteristică UX este foarte frecventă pe site-urile web moderne. Este deosebit de util pentru paginile web care au mult conținut, cum ar fi aplicațiile cu o singură pagină.
cum să ștergeți un fișier deschis într-un alt program
În acest articol, veți afla cum să creați un buton de derulare până sus folosind JavaScript și jQuery.
Cum se creează un buton de derulare până în partea de sus folosind JavaScript
Puteți adăuga un buton de derulare până în partea de sus a site-ului dvs. web utilizând următorul fragment de cod:
Cod 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.
Aici, se creează o structură de bază a paginii web cu date fictive. Trebuie doar să vă concentrați asupra butonului de derulare până în partea de sus.
Când se face clic pe acest buton, pagina este derulată în partea de sus. Acest lucru va fi funcțional după adăugarea codului jQuery.
Cod jQuery
Legate de: Aflați cum să creați un element în 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');
});Aici spectacol class este adăugată la elementul buton dacă utilizatorul derulează mai mult de 300 de pixeli pe pagina web. Acest spectacol class face elementul buton vizibil. În mod implicit, vizibilitatea elementului buton este păstrată ascunsă. Mai multe detalii despre buton se află în următorul cod CSS.
Cod CSS
Legate de: Exemple de cod CSS simple pe care le puteți învăța în 10 minute
#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 de mai sus este folosit pentru a stiliza butonul de derulare până în partea de sus și pagina web. Puteți juca cu codul CSS și stilizați butonul în funcție de cerințele dvs.
Acum aveți un buton de derulare complet funcțional / sus-sus / înapoi. Dacă doriți să aruncați o privire la codul sursă complet utilizat în acest articol, iată Depozit GitHub de acelasi.
Notă : Codul utilizat în acest articol este Licențiat MIT .
Aflați mai multe despre experiența utilizatorului
Experiența utilizatorului se concentrează asupra faptului dacă un produs răspunde nevoilor utilizatorilor săi. Dacă sunteți designer sau dezvoltator, ar fi bine să urmați principiile de proiectare UX și să creați produse minunate. Dacă acest câmp te interesează, trebuie să urmezi calea corectă pentru a începe.
cum se convertește imaginea în vectorAcțiune Acțiune Tweet E-mail Vrei să fii designer UX? Iată Cum să începeți
Sarcina designerului UX este să se asigure că nevoile utilizatorului de software sunt luate în considerare și că sunt încântați de acest proces.
Citiți în continuare Subiecte asemănătoare- Programare
- JavaScript
- jQuery
Yuvraj este student la Universitatea din Delhi, India. Este pasionat de dezvoltarea web Full Stack. Când nu scrie, explorează profunzimea diferitelor tehnologii.
Mai multe de la Yuvraj ChandraAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona