Home-theater-designers
K snadnému vrácení zobrazení do horní části stránky slouží tlačítko „posunout nahoru“. Tato malá funkce UX je na moderních webech velmi běžná. Je to obzvláště užitečné pro webové stránky, které mají hodně obsahu, jako jsou jednostránkové aplikace.
nastavení napájení systému Windows 10 nefunguje
V tomto článku se dozvíte, jak pomocí JavaScriptu a jQuery vytvořit tlačítko posouvání nahoru.
Jak vytvořit tlačítko Scroll-to-Top pomocí JavaScriptu
Na svůj web můžete přidat tlačítko posouvání nahoru pomocí následujícího fragmentu 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.
Zde je vytvořena základní struktura webové stránky s fiktivními daty. Musíte se soustředit pouze na tlačítko posouvání nahoru.
Po kliknutí na toto tlačítko se stránka posune nahoru. To bude funkční po přidání kódu jQuery.
jQuery Code
Příbuzný: Zjistěte, jak vytvořit prvek 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');
});Tady, ukázat třída se přidá do prvku tlačítka, pokud uživatel posouvá více než 300 pixelů na webové stránce. Tento ukázat třída dělá prvek tlačítka viditelným. Ve výchozím nastavení je viditelnost prvku tlačítka skryta. Další podrobnosti o tlačítku jsou v následujícím kódu CSS.
Kód CSS
Příbuzný: Jednoduché příklady kódu CSS, které se můžete naučit za 10 minut
#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;
}Výše uvedený CSS se používá ke stylu tlačítka pro posun nahoru a webové stránky. Můžete hrát s kódem CSS a stylizovat tlačítko podle svých požadavků.
Nyní máte plně funkční tlačítko posouvání nahoru / zpět nahoru. Pokud se chcete podívat na kompletní zdrojový kód použitý v tomto článku, zde je Úložiště GitHub ze stejného.
Poznámka : Kód použitý v tomto článku je Licence MIT .
Další informace o uživatelské zkušenosti
Uživatelská zkušenost se zaměřuje na to, zda produkt splňuje potřeby svých uživatelů. Pokud jste designér nebo vývojář, uděláte dobře, když budete dodržovat zásady návrhu UX a vytvářet úžasné produkty. Pokud vás toto pole zajímá, musíte začít správnou cestou.
přenášet soubor z jednoho počítače do druhéhoPodíl Podíl tweet E-mailem Chcete být designérem UX? Zde je návod, jak začít
Úkolem UX Designer je zajistit, aby bylo postaráno o potřeby uživatelů softwaru a aby byli v tomto procesu nadšeni.
Číst dále Související témata- Programování
- JavaScript
- jQuery
Yuvraj je studentem informatiky na univerzitě v Dillí v Indii. Je nadšený pro webový vývoj Full Stack. Když nepíše, zkoumá hloubku různých technologií.
Více od Yuvraj ChandraPřihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
Kliknutím sem se přihlásíte k odběru