Jak vytvořit tlačítko nahoru?
Tlačítko nahoru nebo tlačítko na začátek. Anglicky scroll up či back to top button. Kdy ho použít a jak na něj?
26.2.2023 | doba čtení: asi 10 min
Tlačítko nahoru vytvoříte poměrně snadno. Nejprve si pro jistotu ujasněme, co to vlastně je. Je to tlačítko, které se objevuje nejčastěji v pravém dolním rohu obrazovky po odskrolování stránky o něco dolů, když nám zmizí horní navigační lišta menu (není-li v pozici fixed pro stálou viditelnost). Anglicky se toto tlačítko nazývá Scroll to top nebo Back to top button.
Zde si řekněme jak ho vytvořit a zprovoznit. Ale nejprve malá úvaha kde, jak a zda ho vůbec použít. Význam má určitě pakliže nemáme fixované horní menu a nedostali bychom se na začátek stránky jinak než skrolováním. A zejména to platí u stránek, které jsou velmi dlouhé. Například experti z Nielsen Norman Group doproučují, že jsou-li stránky delší než 400vh, má být tlačítko implementováno, abychom se "neuskrolovali".
Samozřejmě jistá redundance nebo zdvojení či další zvícenásobení způsobu ovládání je běžné a uživatelsky přívětivé. Ale je to na vašem zvážení. Například tyto stránky využívají fixního postranního menu respektive fixního horního menu při viewportu pod 1200px, takže tlačítko nahoru není nějak zvlášť potřebné. U mobilních browserů je navíc tlačítko nahoru integrováno nativně s tím, že je lze vypnout.
Jak tedy vytvořit toto tlačítko?
Stačí zkopírovat následující kód v JavaScriptu do našeho HTML souboru a nebo do samostatného JS souboru, který bude s HTML souborem propojen.
Tento kód naleznete na stránkách www.w3schools.com, které jsou hlubokou studnicí zdrojů a znalostí webové tvorby a programování:
HTML kód:
<button onclick="topFunction()" id="myBtn" title="Go to top">Nahoru</button>
CSS kód:
#myBtn {
display: none; /* defaultně je tlačítko skryté*/
position: fixed; /* pozice fixed nebo sticky*/
bottom: 20px; /* Vzdálenost od spodního okraje viewportu*/
right: 30px; /* vzdálenost od pravého okraje okna prohlížeče*/
z-index: 99; /* z-index určuje pořadí vrstvy. Vyšší hodnota překryje nižší*/
background-color: red;
color: white;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: #555;
}
A zde JavaScrip kód:
<script>
// Identifikuje tlačítko na základě jeho id:
let mybutton = document.getElementById("myBtn");
// Tato funkce zajistí, že se tlačítko zobrazí až po odscrolování dolů o 20px:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// A zde je kód, který zajistí samotné posunutí stránky:
function topFunction() {
document.body.scrollTop = 0; // pro Safari
document.documentElement.scrollTop = 0; // pro Chrome, Firefox, IE a Opera
}
</script>
Asi netřeba uvádět, že vzhled tlačítka si můžete nastylovat dle své libosti stejně tak jako jakékoli další parametry. Coby tlačítko můžete použít třeba nějaký obrázek s šipkou, který si vytvoříte v grafickém editoru. Někteří specialisté na UI, ale doporučují, aby na něm byla vždy explicitně uvedena jeho funkce, tedy "nahoru" nebo jiné znění.
Je jasné, že existuje mnoho dalších způsobů, jak tuto funkcionalitu vyřešit. Některá tlačítka například vyjíždějí ze strany nebo se jinak pohybují. Někdy se tlačítko objeví, až po zaskrolování nahoru, aby nerušilo obsah, pokud zrovna není potřeba.
Byl pro vás tento článek přínosný? Chcete-li můžete poslat příspěvek na kávu, která pomohla tento článek napsat.
Sdílet:
