Home-theater-designers
En 'scroll-to-top'-knap bruges til let at vende din visning til toppen af siden. Denne lille UX -funktion er meget almindelig på moderne websteder. Det er især nyttigt for websider, der har meget indhold, f.eks. Applikationer på én side.
hvordan man tilføjer klasser til google kalender
I denne artikel lærer du, hvordan du opretter en scroll-to-top-knap ved hjælp af JavaScript og jQuery.
Sådan opretter du en rulle-til-top-knap ved hjælp af JavaScript
Du kan tilføje en rulle-til-top-knap til dit websted ved hjælp af følgende kodestykke:
HTML -kode
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.
Her oprettes en grundlæggende struktur på websiden med dummy -data. Du behøver kun at fokusere på knappen til at rulle til toppen.
Når der klikkes på denne knap, rulles siden til toppen. Dette vil være funktionelt efter tilføjelse af jQuery -koden.
jQuery -kode
Relaterede: Lær, hvordan du opretter et element i 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');
});Her er at vise klasse tilføjes til knapelementet, hvis brugeren ruller mere end 300 pixels på websiden. Det her at vise klasse gør knapelementet synligt. Som standard forbliver synligheden af knapelementet skjult. Flere detaljer om knappen findes i følgende CSS -kode.
CSS -kode
Relaterede: Enkle CSS -kodeeksempler, du kan lære på 10 minutter
#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;
}Ovenstående CSS bruges til at style rulle-til-top-knappen og websiden. Du kan spille med CSS -koden og style knappen i henhold til dine krav.
Nu har du en fuldt funktionel scroll-to-top / back-to-top knap. Hvis du vil se på den komplette kildekode, der bruges i denne artikel, er her GitHub -depot af det samme.
Bemærk : Koden i denne artikel er MIT Licenseret .
Lær mere om brugeroplevelse
Brugeroplevelse fokuserer på, om et produkt opfylder brugernes behov. Hvis du er designer eller udvikler, er det godt at følge UX -designprincipper og skabe fantastiske produkter. Hvis dette felt interesserer dig, skal du følge den korrekte vej for at komme i gang.
bedste køb nu betal senere webstederDel Del Tweet E -mail Vil du være UX -designer? Sådan kommer du i gang
Det er UX Designer's opgave at sikre, at softwarebrugerens behov bliver taget hånd om, og at de er glade for processen.
Læs Næste Relaterede emner- Programmering
- JavaScript
- jQuery
Yuvraj er en datalogi bachelorstuderende ved University of Delhi, Indien. Han brænder for Full Stack Web Development. Når han ikke skriver, undersøger han dybden af forskellige teknologier.
Mere fra Yuvraj ChandraAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere