Změna location.hash bez posunu stránky

V případě, že se na stránce mění location.hash (#mřížka a obsah za ní v URL), prohlížeč zkusí najít element s odpovídajícím ID a odscrollovat k němu.

Tato funkčnost nemusí být vždy žádoucí. Třeba u přepínání obsahu, kdy chceme umožnit odkazování na příslušnou kotvu, ale poskočení je zbytečně rušivé.

Řešení

Postupů, jak změnit hash, ale neodrolovat, existuje několik.

1. Změnit hash na něco, co žádný <element id="idecko"> nezachytí. Nevýhoda je, že tato vygenerovaná adresa nebude bez JavaScriptu fungovat. Kromě toho nepůjde použít CSS selektor :target.

2. Změnit ID elementu — po vyvolání akce (typicky kliknutí) se uloží do dočasné proměnné odkaz na element, změní se mu ID, změní se location.hash, vrátí se původní ID.

   var element = document.getElementById(obsahHashe);
   var puvodniId = element.id;
   element.id = puvodniId + "-nesmysl";
   location.hash = "#" + puvodniId;
   element.id = puvodniId;
   

   Ukázka

   Problém s :target selektorem ale přetrvává.

3. Odrolovat na původní posici změnou scrollTop — uloží se o kolik je odrolováno, změní se hash a odroluje se zpátky.

   var top = document.documentElement.scrollTop + document.body.scrollTop;
   location.hash = "#" + idElementu;
   document.body.scrollTop = document.documentElement.scrollTop = top;

   V některých prohlížečích je třeba používat body.scrollTop a jinde documentElement.scrollTop.

   Ukázka