Scroll to top odkaz jQuery

Některé WordPress šablony mají tu nepříjemnou vlastnost, že výpis článků je dlouhý a v patičce nejsou žádné navigační prvky. Musíte pak scrollovat celou stránkou až zpět na začátek, aby jste se dostali k menu a další nabídce článků. Proto si dne ukážeme jednoduchý postup, jak přidat do patičky odkaz, který vás vrátí na začátek stránky.

Nejjednodušší postup je vytvořit takzvanou kotvu a po kliknutí se stránka přesune na místo kotvy. Tagu body přidáme id=“frame“ a odkazovat na něj budeme pomocí href=“#frame“. To je ale jen příklad, který nepoužijeme, protože přesun je okamžitý a působí nepříjemně.

Vytvoříme si tedy v patičce odkaz, nebo ikonku, může vypadat třeba takto:

A odkaz bude vypadat takto:

Do souboru s javascriptem vložíme tento kód:

jQuery("a.ico-top").click(function(){
  jQuery("html, body").animate({ scrollTop: 0 }, "slow");
  
  return false;
});

Protože tento postup využívá jQuery, musíte se ujistit, že je knihovna v šabloně includovaná a v js souboru by měla být funkce umístěna v:

jQuery(document).ready(function() {   

});