Home-theater-designers
Gumb za pomicanje do vrha koristi se za jednostavan povratak prikaza na vrh stranice. Ova mala značajka UX -a vrlo je česta na modernim web stranicama. Posebno je korisno za web stranice koje imaju puno sadržaja, poput aplikacija na jednoj stranici.
Windows 10 disk na 100%
U ovom ćete članku naučiti kako izraditi gumb za pomicanje do vrha pomoću JavaScripta i jQueryja.
Kako izraditi gumb za pomicanje do vrha pomoću JavaScripta
Svojoj web stranici možete dodati gumb za pomicanje do vrha pomoću sljedećeg isječka koda:
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.
Ovdje se stvara osnovna struktura web stranice s lažnim podacima. Trebate se usredotočiti samo na gumb za pomicanje do vrha.
Kad se pritisne ovaj gumb, stranica se pomiče do vrha. To će biti funkcionalno nakon dodavanja jQuery koda.
jQuery kôd
Povezano: Saznajte kako stvoriti element u jQueryju
// ===== 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');
});Evo, pokazati class dodaje se elementu gumba ako korisnik pomiče više od 300 piksela na web stranici. Ovaj pokazati class čini element gumba vidljivim. Prema zadanim postavkama, vidljivost elementa gumba ostaje skrivena. Više pojedinosti o gumbu nalazi se u sljedećem CSS kodu.
CSS kod
Povezano: Jednostavni primjeri CSS koda koje možete naučiti za 10 minuta
#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;
}Gore navedeni CSS koristi se za oblikovanje gumba za pomicanje do vrha i web stranice. Možete se igrati s CSS kodom i oblikovati gumb prema svojim zahtjevima.
Sada imate potpuno funkcionalan gumb za pomicanje prema gore / nazad do vrha. Ako želite pogledati potpuni izvorni kod koji se koristi u ovom članku, evo Spremište GitHub istog.
Bilješka : Kôd koji se koristi u ovom članku je MIT licencirano .
Saznajte više o korisničkom iskustvu
Korisničko iskustvo usredotočeno je na to zadovoljava li proizvod potrebe svojih korisnika. Ako ste dizajner ili programer, bilo bi dobro da slijedite načela UX dizajna i stvorite izvrsne proizvode. Ako vas ovo polje zanima, za početak morate slijediti ispravan put.
kako napraviti DVD za podizanje sustavaUdio Udio Cvrkut E -pošta Želite biti UX dizajner? Evo kako započeti
Zadaća UX Designer -a je da se pobrine za potrebe korisnika softvera i da ih oduševi u tom procesu.
Pročitajte Dalje Povezane teme- Programiranje
- JavaScript
- jQuery
Yuvraj je student preddiplomskog studija Računarstva na Sveučilištu u Delhiju u Indiji. Oduševljen je Full Stack web razvojem. Kad ne piše, istražuje dubinu različitih tehnologija.
Više od Yuvraja ChandrePretplatite se na naše obavijesti
Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!
Kliknite ovdje za pretplatu