Home-theater-designers
En 'scroll-to-top' -knapp används för att enkelt återställa din vy till toppen av sidan. Denna lilla UX -funktion är mycket vanlig på moderna webbplatser. Det är särskilt användbart för webbsidor som har mycket innehåll, som applikationer på en sida.
hur man grupperar flikar i krom
I den här artikeln lär du dig hur du skapar en scroll-to-top-knapp med JavaScript och jQuery.
Hur man skapar en scroll-to-top-knapp med hjälp av JavaScript
Du kan lägga till en scroll-to-top-knapp på din webbplats med hjälp av följande kodavsnitt:
HTML -kod
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.
Här skapas en grundläggande struktur på webbsidan med dummy -data. Du behöver bara fokusera på scroll-to-top-knappen.
När du klickar på den här knappen rullas sidan till toppen. Detta fungerar efter att jQuery -koden har lagts till.
jQuery -kod
Relaterad: Lär dig hur du skapar ett 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');
});Här, show klass läggs till knappelementet om användaren rullar mer än 300 pixlar på webbsidan. Detta show class gör knappelementet synligt. Som standard hålls knappelementets synlighet dold. Mer information om knappen finns i följande CSS -kod.
CSS -kod
Relaterad: Enkla exempel på CSS -kod som du kan lära dig på 10 minuter
#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;
}Ovanstående CSS används för att styla bläddra till toppen-knappen och webbsidan. Du kan spela med CSS -koden och styla knappen enligt dina krav.
Nu har du en fullt fungerande scroll-to-top / back-to-top-knapp. Om du vill titta på hela källkoden som används i den här artikeln, här är GitHub -förvaret av samma.
Notera : Koden som används i denna artikel är MIT Licensierad .
Läs mer om användarupplevelse
Användarupplevelse fokuserar på om en produkt uppfyller sina användares behov. Om du är en designer eller utvecklare är det bra att följa UX -designprinciper och skapa fantastiska produkter. Om det här fältet intresserar dig måste du följa rätt väg för att komma igång.
det finns inga strömalternativ tillgängligaDela med sig Dela med sig Tweet E-post Vill du bli en UX -designer? Så här kommer du igång
Det är UX Designer's jobb att se till att mjukvaranvändarens behov tas om hand och att de är glada över processen.
Läs Nästa Relaterade ämnen- Programmering
- JavaScript
- jQuery
Yuvraj är en datavetenskaplig grundstudent vid University of Delhi, Indien. Han brinner för Full Stack webbutveckling. När han inte skriver utforskar han djupet i olika tekniker.
Mer från Yuvraj ChandraPrenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
Klicka här för att prenumerera