Home-theater-designers
Es fa servir un botó de desplaçament cap amunt per tornar la vista a la part superior de la pàgina fàcilment. Aquesta petita característica UX és molt comuna als llocs web moderns. És particularment útil per a pàgines web amb molt de contingut, com ara aplicacions d’una sola pàgina.
aplicacions gratuïtes de música fora de línia per a Android
En aquest article, aprendreu a crear un botó de desplaçament cap amunt mitjançant JavaScript i jQuery.
Com es crea un botó de desplaçament cap amunt mitjançant JavaScript
Podeu afegir un botó de desplaçament cap amunt al vostre lloc web mitjançant el fragment de codi següent:
Codi 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.
Aquí es crea una estructura bàsica de la pàgina web amb dades falses. Només cal centrar-se en el botó de desplaçament cap amunt.
Quan es fa clic en aquest botó, la pàgina es desplaça cap a la part superior. Això serà funcional després d'afegir el codi jQuery.
Codi jQuery
Relacionat: Obteniu informació sobre com es crea un element a 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');
});Aquí, el espectacle La classe s'afegeix a l'element del botó si l'usuari desplaça més de 300 píxels a la pàgina web. Això espectacle class fa visible l'element del botó. Per defecte, la visibilitat de l'element del botó es manté oculta. Trobareu més detalls sobre el botó al següent codi CSS.
Codi CSS
Relacionat: Exemples simples de codis CSS que podeu aprendre en 10 minuts
#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;
}El CSS anterior s’utilitza per donar estil al botó de desplaçament cap amunt i a la pàgina web. Podeu jugar amb el codi CSS i dissenyar el botó segons els vostres requisits.
Ara teniu un botó de desplaçament cap amunt / de dalt a dalt completament funcional. Si voleu fer una ullada al codi font complet utilitzat en aquest article, aquí teniu el fitxer Dipòsit de GitHub del mateix.
Nota : El codi utilitzat en aquest article és Llicència MIT .
Més informació sobre l'experiència d'usuari
L’experiència de l’usuari se centra en si un producte compleix les necessitats dels seus usuaris. Si sou un dissenyador o un desenvolupador, faríeu bé de seguir els principis de disseny UX i crear productes increïbles. Si aquest camp us interessa, heu de seguir el camí correcte per començar.
com moure cançons d'iPod a iTunesCompartir Compartir Tweet Correu electrònic Voleu ser dissenyador de UX? A continuació us expliquem com començar
La tasca del dissenyador UX és assegurar-se que les necessitats de l’usuari del programari siguin ateses i que estiguin encantats del procés.
Llegiu a continuació Temes relacionats- Programació
- JavaScript
- jQuery
Yuvraj és estudiant universitari en ciències de la computació a la Universitat de Delhi, Índia. És un apassionat del desenvolupament web Full Stack. Quan no escriu, explora la profunditat de les diferents tecnologies.
Més de Yuvraj ChandraSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us