Home-theater-designers
Na jednoduché vrátenie zobrazenia do hornej časti stránky sa používa tlačidlo „posúvať nahor“. Táto malá funkcia UX je na moderných webových stránkach veľmi bežná. Je to obzvlášť užitočné pre webové stránky s veľkým obsahom, ako sú jednostránkové aplikácie.
mac os x nie je možné nainštalovať do tohto počítača
V tomto článku sa naučíte, ako vytvoriť tlačidlo posúvania nahor pomocou JavaScriptu a jQuery.
Ako vytvoriť tlačidlo posúvania nahor pomocou JavaScriptu
Na svoj web môžete pridať tlačidlo posúvania nahor pomocou nasledujúceho útržku kódu:
HTML kód
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.
Tu sa vytvorí základná štruktúra webovej stránky s fiktívnymi údajmi. Stačí sa zamerať na tlačidlo posúvania nahor.
Po kliknutí na toto tlačidlo sa stránka posunie nahor. Toto bude funkčné po pridaní kódu jQuery.
jQuery Code
Súvisiace: Zistite, ako vytvoriť prvok v 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');
});Tu, šou class sa pridá k tlačidlovému prvku, ak používateľ posúva na webovej stránke viac ako 300 pixelov. Toto šou trieda zviditeľňuje prvok tlačidla. V predvolenom nastavení je viditeľnosť tlačidlového prvku skrytá. Viac podrobností o tlačidle je v nasledujúcom kóde CSS.
Kód CSS
Súvisiace: Jednoduché príklady kódu CSS, ktoré sa môžete naučiť za 10 minút
#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;
}Vyššie uvedený CSS sa používa na úpravu tlačidla posúvania nahor a webovej stránky. Môžete hrať s kódom CSS a tvarovať tlačidlo podľa svojich požiadaviek.
Teraz máte plne funkčné tlačidlo posúvania nahor / späť na začiatok. Ak sa chcete pozrieť na kompletný zdrojový kód použitý v tomto článku, tu je súbor Úložisko GitHub toho istého.
Poznámka : Kód použitý v tomto článku je Licencia MIT .
Získajte viac informácií o používateľských skúsenostiach
Skúsenosti používateľov sa zameriavajú na to, či produkt spĺňa potreby svojich používateľov. Ak ste dizajnér alebo vývojár, urobíte dobre, ak budete dodržiavať zásady dizajnu UX a vytvárať úžasné produkty. Ak vás toto pole zaujíma, musíte začať správnou cestou.
aké programy hp môžem odinštalovať Windows 10zdieľam zdieľam Tweet E -mail Chcete byť dizajnérom UX? Tu je návod, ako začať
Úlohou UX Designer je zaistiť, aby boli postarané o potreby používateľov softvéru a aby boli v tomto procese nadšení.
Čítajte ďalej Súvisiace témy- Programovanie
- JavaScript
- jQuery
Yuvraj je študentom informatiky na univerzite v Dillí v Indii. Je nadšený pre vývoj webových aplikácií Full Stack. Keď nepíše, skúma hĺbku rôznych technológií.
Viac od Yuvraja Chandruprihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber