O webu
Změna location.hash bez odrolování 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