Odrolování bez JavaScriptu

Odrolování na HTML značku v JS se zabývá samostatný článek.

Existují ale nějaké možnosti jen v HTML?

Kotva

Pro odkazování na jednotlivé části dokumentu existují #kotvy. Pro odrolování potom stačí použít běžný odkaz:

<a href="#kotva">
  Odkaz na místo označené ↓
</a>
…
<a name="kotva"></a>

Odrolování po načtení

Využít kotvy jde pro odrolování ihned při načtení stránky.

To jde třeba díky <meta> značce refresh v části <head>:

<meta http-equiv="refresh" content="1;url=#kotva">

Bohužel v takovém případě prohlížeče obnoví celou stránku. To není moc žádoucí, protože tím vznikne nekonečná smyčka přesměrování.

Teoreticky jde tento postup zkombinovat se serverovým řešením a tuto značku zobrazit jen při prvním načtení. Příklad v PHP:

<?php if (!isset($_GET["odrolovat"])):?>
  <meta http-equiv="refresh" content="1;url=?odrolovat#kotva">
<?php endif ?>

U webové stránky, kde je nutné řešit SEO, to není úplně vhodné, protože vznikají duplicitní URL, které by bylo potřeba řešit.

Odrolování po odeslání formuláře

Postupu s kotvou jde využít i při odesílání webového formuláře.

Kotvu je nutné uvést už do atributu action:

<form action="url#kotva">
…

HTTP přesměrování na kotvu

Do hlavičky Location jde uvést stránku s kotvou. Řešení v PHP:

<?php 
header("Location: stranka.html#kotva");
?>

Dle HTTP specifikace by v této hlavičce měla být absolutní URL, takže tento postup teoreticky není v souladu se specifikací. Nicméně funguje dobře napříč prohlížeči.

Focusování políčka

Zajímavá možnost, jak automaticky odrolovat ihned po načtení stránky bez špetky JS, je využít políčka <input> s atributem autofocus (funkční od IE 9).

<input autofocus style="position: absolute; left: -9999px">

Skrýt políčko, aby nestrašilo, nestačí přes display: none, protože by nedostalo focus.

Živá ukázka

Výhoda tohoto postupu je, že prohlížeč inteligentně řeší odrolování na element v rámci viewportu.

Kromě toho se odrolování provede v nejkratší možné chvíli od načtení, takže by se nemělo stávat, že uživatel začne rolovat už před automatickým odrolováním. To je nevýhoda JS řešení, kdy se nejprve čeká ještě na stažení a zpracování JavaScriptu.

Řešení funguje i v mobilních prohlížečích.

Zásadní nevýhoda spočívá v tom, že se do políčka přesune kursor, čím se zablokují některé klávesové zkratky.

Závěr

Používat pro odrolování JavaScript je často nejlepší možnost. V případě, že by mělo být odrolování plynulé potom jediná volba.

Existují ale i možnosti na JS nezávislé.

Kombinace autofocusu + JS pro odblokování kláves by mohla být použitelná i v praxi díky inteligentnímu přesunu cíle do viewportu.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Jednostránkový web

Jednostránkový web

Kdy vytvářet web o jediné stránce. Jaké jsou výhody a nevýhody.

Nekonečné rolování

Nekonečné scrollování

Je lepší nekonečné rolování, klasické stránkování nebo tlačítko „Zobrazit další“?

Poskakování kvůli scrollbaru

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

HTML atribut scoped

HTML atribut scoped

HTML 5.1 přichází s možností validně používat element <style> i mimo část <head>.

Komentáře