Home-theater-designers
Mygtukas „slinkti į viršų“ naudojamas norint lengvai grąžinti vaizdą į puslapio viršų. Ši maža UX funkcija yra labai paplitusi šiuolaikinėse svetainėse. Tai ypač naudinga tinklalapiams, kuriuose yra daug turinio, pvz., Vieno puslapio programoms.
atlikti sąrašą, kuris sinchronizuojamas su „Google“ kalendoriumi
Šiame straipsnyje sužinosite, kaip sukurti slinkties į viršų mygtuką naudojant „JavaScript“ ir „jQuery“.
Kaip sukurti slinkties į viršų mygtuką naudojant „JavaScript“
Galite pridėti slinkties į viršų mygtuką savo svetainėje naudodami šį kodo fragmentą:
HTML kodas
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.
Čia sukuriama pagrindinė tinklalapio struktūra su netikrais duomenimis. Jums tereikia sutelkti dėmesį į slinkties į viršų mygtuką.
Spustelėjus šį mygtuką, puslapis slenkamas į viršų. Tai bus funkcionalu pridėjus „jQuery“ kodą.
„jQuery“ kodas
Susijęs: Sužinokite, kaip sukurti elementą „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');
});Čia, Rodyti klasė pridedama prie mygtuko elemento, jei vartotojas tinklalapyje peržiūri daugiau nei 300 pikselių. Tai Rodyti klasė leidžia matyti mygtuko elementą. Pagal numatytuosius nustatymus mygtuko elemento matomumas yra paslėptas. Daugiau informacijos apie mygtuką rasite šiame CSS kode.
CSS kodas
Susijęs: Paprasti CSS kodo pavyzdžiai, kuriuos galite išmokti per 10 minučių
#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;
}Aukščiau pateiktas CSS naudojamas slinkties į viršų mygtukui ir tinklalapiui stilizuoti. Galite žaisti naudodami CSS kodą ir stilizuoti mygtuką pagal savo poreikius.
Dabar turite visiškai funkcionalų slinkties į viršų / atgal į viršų mygtuką. Jei norite peržiūrėti visą šiame straipsnyje naudojamą šaltinio kodą, čia yra „GitHub“ saugykla to paties.
Pastaba : Šiame straipsnyje naudojamas kodas yra MIT licencijuota .
Sužinokite daugiau apie naudotojų patirtį
Vartotojų patirtis orientuota į tai, ar produktas atitinka vartotojų poreikius. Jei esate dizaineris ar kūrėjas, jums būtų gerai laikytis UX dizaino principų ir kurti nuostabius produktus. Jei šis laukas jus domina, turite pradėti eiti teisingu keliu.
kaip padaryti, kad chromas naudotų mažiau RAMDalintis Dalintis „Tweet“ Paštu Norite būti UX dizaineris? Štai kaip pradėti
„UX Designer“ užduotis yra užtikrinti, kad būtų atsižvelgta į programinės įrangos vartotojo poreikius ir kad jie būtų patenkinti šiuo procesu.
Skaityti toliau Susijusios temos- Programavimas
- „JavaScript“
- „jQuery“
Yuvraj yra kompiuterių mokslo bakalauro studentas Delyje, Indijoje. Jis aistringas „Full Stack“ žiniatinklio kūrimui. Kai jis nerašo, jis tyrinėja skirtingų technologijų gylį.
Daugiau iš Yuvraj ChandraPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia