Home-theater-designers
Een 'scroll-to-top'-knop wordt gebruikt om uw weergave gemakkelijk naar de bovenkant van de pagina terug te brengen. Deze kleine UX-functie is heel gebruikelijk in moderne websites. Het is vooral handig voor webpagina's met veel inhoud, zoals toepassingen met één pagina.
beste 3 in 1 Apple laadstation
In dit artikel leer je hoe je een scroll-to-top-knop maakt met JavaScript en jQuery.
Hoe maak je een Scroll-to-Top-knop met JavaScript
U kunt een scroll-to-top-knop aan uw website toevoegen met behulp van het volgende codefragment:
HTML code
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.
Hier wordt een basisstructuur van de webpagina gemaakt met dummy-gegevens. Je hoeft je alleen maar te concentreren op de scroll-to-top-knop.
Wanneer op deze knop wordt geklikt, wordt de pagina naar boven gescrold. Dit zal functioneel zijn na het toevoegen van de jQuery-code.
jQuery-code
Verwant: Leer hoe u een element in jQuery maakt
// ===== 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');
});Hier de laten zien class wordt toegevoegd aan het knopelement als de gebruiker meer dan 300 pixels op de webpagina scrolt. Dit laten zien class maakt het knopelement zichtbaar. Standaard wordt de zichtbaarheid van het knopelement verborgen gehouden. Meer details over de knop vindt u in de volgende CSS-code.
CSS-code
Verwant: Eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt leren
#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;
}De bovenstaande CSS wordt gebruikt om de scroll-to-top-knop en de webpagina op te maken. U kunt met de CSS-code spelen en de knop naar uw eigen wensen stylen.
Nu heb je een volledig functionele scroll-to-top / back-to-top-knop. Als je de volledige broncode wilt bekijken die in dit artikel wordt gebruikt, is hier de: GitHub-opslagplaats van hetzelfde.
Opmerking : De code die in dit artikel wordt gebruikt is MIT-licentie .
Meer informatie over gebruikerservaring
Gebruikerservaring richt zich op de vraag of een product voldoet aan de behoeften van zijn gebruikers. Als je een ontwerper of een ontwikkelaar bent, doe je er goed aan om de UX-ontwerpprincipes te volgen en geweldige producten te maken. Als dit veld u interesseert, moet u het juiste pad volgen om aan de slag te gaan.
gratis online turn-based strategiespellenDeel Deel Tweeten E-mail UX-designer worden? Hier leest u hoe u aan de slag gaat
Het is de taak van de UX Designer om ervoor te zorgen dat aan de behoeften van de softwaregebruiker wordt voldaan en dat ze blij zijn met het proces.
Lees volgende Gerelateerde onderwerpen- Programmeren
- JavaScript
- jQuery
Yuvraj is een student Computerwetenschappen aan de Universiteit van Delhi, India. Hij is gepassioneerd door Full Stack Web Development. Als hij niet aan het schrijven is, onderzoekt hij de diepte van verschillende technologieën.
Meer van Yuvraj ChandraAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren