Home-theater-designers
Un pulsante 'scorri verso l'alto' viene utilizzato per riportare facilmente la visualizzazione all'inizio della pagina. Questa piccola funzionalità UX è molto comune nei siti Web moderni. È particolarmente utile per le pagine Web con molti contenuti, come le applicazioni a pagina singola.
tv gratis online nessuna registrazione
In questo articolo imparerai come creare un pulsante di scorrimento verso l'alto utilizzando JavaScript e jQuery.
Come creare un pulsante di scorrimento verso l'alto utilizzando JavaScript
Puoi aggiungere un pulsante di scorrimento verso l'alto al tuo sito web utilizzando il seguente frammento di codice:
Codice 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.
Qui viene creata una struttura di base della pagina web con dati fittizi. Devi solo concentrarti sul pulsante di scorrimento verso l'alto.
Quando si fa clic su questo pulsante, la pagina scorre verso l'alto. Questo sarà funzionale dopo aver aggiunto il codice jQuery.
Codice jQuery
Imparentato: Scopri come creare un elemento in 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');
});qui, il mostrare class viene aggiunta all'elemento button se l'utente scorre più di 300 pixel sulla pagina web. Questo mostrare class rende visibile l'elemento button. Per impostazione predefinita, la visibilità dell'elemento pulsante viene mantenuta nascosta. Maggiori dettagli sul pulsante sono nel seguente codice CSS.
Codice CSS
Imparentato: Semplici esempi di codice CSS che puoi imparare in 10 minuti
#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;
}Il CSS sopra è usato per dare uno stile al pulsante di scorrimento verso l'alto e alla pagina web. Puoi giocare con il codice CSS e modellare il pulsante in base alle tue esigenze.
Ora hai un pulsante scroll-to-top/back-to-top completamente funzionale. Se vuoi dare un'occhiata al codice sorgente completo utilizzato in questo articolo, ecco il Archivio GitHub dello stesso.
Nota : Il codice utilizzato in questo articolo è Licenza MIT .
Ulteriori informazioni sull'esperienza utente
L'esperienza dell'utente si concentra sul fatto che un prodotto soddisfi le esigenze dei suoi utenti. Se sei un designer o uno sviluppatore, faresti bene a seguire i principi di progettazione UX e creare prodotti fantastici. Se questo campo ti interessa, devi seguire il percorso corretto per iniziare.
come spostare le canzoni da iPod a iTunesCondividere Condividere Tweet E-mail Vuoi essere un designer UX? Ecco come iniziare
È compito dell'UX Designer assicurarsi che le esigenze dell'utente del software siano soddisfatte e che sia soddisfatto del processo.
Leggi Avanti Argomenti correlati- Programmazione
- JavaScript
- jQuery
Yuvraj è uno studente universitario di Informatica presso l'Università di Delhi, in India. È appassionato di sviluppo Web Full Stack. Quando non scrive, esplora la profondità di diverse tecnologie.
Altro da Yuvraj ChandraIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti