Home-theater-designers
En 'scroll-to-top' -knapp brukes til å enkelt returnere visningen til toppen av siden. Denne lille UX -funksjonen er veldig vanlig på moderne nettsteder. Det er spesielt nyttig for nettsider som har mye innhold, som enkeltsideprogrammer.
hvordan finne gamle meldinger på iphone
I denne artikkelen lærer du hvordan du oppretter en rulle-til-topp-knapp ved hjelp av JavaScript og jQuery.
Hvordan lage en rulle-til-topp-knapp ved hjelp av JavaScript
Du kan legge til en rulle-til-topp-knapp på nettstedet ditt ved å bruke følgende kodebit:
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 opprettes en grunnleggende struktur på nettsiden med dummy -data. Du trenger bare å fokusere på rull-til-toppen-knappen.
Når du klikker på denne knappen, rulles siden til toppen. Dette vil være funksjonelt etter at jQuery -koden er lagt til.
jQuery Code
I slekt: Lær hvordan du oppretter 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, den forestilling klasse legges til i knappelementet hvis brukeren ruller mer enn 300 piksler på websiden. Dette forestilling klasse gjør knappelementet synlig. Som standard holdes synligheten til knappelementet skjult. Flere detaljer om knappen er i følgende CSS -kode.
CSS -kode
I slekt: 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;
}Ovennevnte CSS brukes til å style rulle-til-toppen-knappen og websiden. Du kan spille med CSS -koden og style knappen i henhold til dine krav.
Nå har du en fullt funksjonell rulle-til-topp / tilbake-til-topp-knapp. Hvis du vil se på hele kildekoden som brukes i denne artikkelen, her er GitHub -depot av det samme.
Merk : Koden som brukes i denne artikkelen er MIT lisensiert .
Lær mer om brukeropplevelse
Brukeropplevelse fokuserer på om et produkt tilfredsstiller brukernes behov. Hvis du er designer eller utvikler, er det bra om du følger UX -designprinsipper og lager fantastiske produkter. Hvis dette feltet interesserer deg, må du følge riktig vei for å komme i gang.
beste kjøp nå betal senere siderDele Dele kvitring E -post Vil du bli en UX -designer? Slik kommer du i gang
Det er UX Designer sin jobb å sørge for at programvarebrukerens behov blir ivaretatt, og at de er glade i prosessen.
Les neste Relaterte temaer- Programmering
- JavaScript
- jQuery
Yuvraj er en informatikkstudent ved University of Delhi, India. Han brenner for Full Stack webutvikling. Når han ikke skriver, utforsker han dybden i forskjellige teknologier.
Mer fra Yuvraj ChandraAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
Klikk her for å abonnere