Home-theater-designers
Poga “ritiniet uz augšu” tiek izmantota, lai skatu viegli atgrieztos lapas augšdaļā. Šī mazā UX funkcija ir ļoti izplatīta mūsdienu vietnēs. Tas ir īpaši noderīgi tīmekļa lapām, kurās ir daudz satura, piemēram, vienas lapas lietojumprogrammām.
ābolu pulksteņu sērija 3 pret 6
Šajā rakstā jūs uzzināsit, kā izveidot ritināšanas pogu uz augšu, izmantojot JavaScript un jQuery.
Kā izveidot ritināšanas pogu uz augšu, izmantojot JavaScript
Vietnei varat pievienot ritināšanas pogu uz augšu, izmantojot šādu koda fragmentu:
HTML kods
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.
Šeit tiek izveidota tīmekļa lapas pamatstruktūra ar fiktīviem datiem. Jums jākoncentrējas tikai uz ritināšanas uz augšu pogu.
Noklikšķinot uz šīs pogas, lapa tiek ritināta uz augšu. Tas būs funkcionāls pēc jQuery koda pievienošanas.
jQuery kods
Saistīts: Uzziniet, kā izveidot elementu 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');
});Lūk, šovs klase tiek pievienota pogas elementam, ja lietotājs tīmekļa lapā ritina vairāk nekā 300 pikseļus. Šī šovs klase padara pogas elementu redzamu. Pēc noklusējuma pogas elementa redzamība tiek paslēpta. Sīkāka informācija par pogu atrodama šādā CSS kodā.
CSS kods
Saistīts: Vienkārši CSS koda piemēri, kurus varat iemācīties 10 minūtēs
#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;
}Iepriekš minēto CSS izmanto, lai veidotu ritināšanas pogas uz augšu un tīmekļa lapas stilu. Jūs varat spēlēt ar CSS kodu un noformēt pogu atbilstoši savām prasībām.
Tagad jums ir pilnībā funkcionāla ritināšanas poga uz augšu / atpakaļ uz augšu. Ja vēlaties apskatīt visu šajā rakstā izmantoto avota kodu, šeit ir GitHub krātuve no tā paša.
Piezīme : Šajā rakstā izmantotais kods ir MIT licencēts .
Uzziniet vairāk par lietotāju pieredzi
Lietotāju pieredze ir vērsta uz to, vai produkts atbilst tā lietotāju vajadzībām. Ja esat dizainers vai izstrādātājs, jums būtu labi sekot UX dizaina principiem un radīt satriecošus produktus. Ja šis lauks jūs interesē, jums jāseko pareizajam ceļam, lai sāktu darbu.
kā salabot spoku pieskārienu iPhone XKopīgot Kopīgot Čivināt E -pasts Vai vēlaties būt UX dizainers? Lūk, kā sākt darbu
UX dizainera uzdevums ir pārliecināties, ka tiek ievērotas programmatūras lietotāja vajadzības un ka viņi ir sajūsmā par šo procesu.
Lasīt Tālāk Saistītās tēmas- Programmēšana
- JavaScript
- jQuery
Yuvraj ir datorzinātņu bakalaura students Deli universitātē, Indijā. Viņš aizraujas ar Full Stack tīmekļa izstrādi. Kad viņš neraksta, viņš pēta dažādu tehnoloģiju dziļumu.
Vairāk no Yuvraj ChandraAbonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu