Jaksi mi to vůbec nefunguje :(
xom`s pinion - Tom Hnatovsky Blog
Plynulé scrollování s jQuery
Pro výrobu moderního jednostránkového webu, který bude mít propojené sekce kotvami v HTML potřebujete kus JavaScriptu, který zajistí plynulý přechod mezi jednotlivými částmi. V tomto krátkém článku si ukážeme řešení pomocí jQuery a jQuery Easing Pluginu.
Základem bude HTML kód, který bude obsahovat sekce označené atributem id="kod-sekce" a odkazy, které budou odkazovat na dané sekce pomocí #kod-sekce. Cílem je, aby odkazování na webu fungovalo i bez JavaScriptu.
jQuery kód, který všechno rozhýbe spustíme ihned po načtení stránky:
$(document).ready(function() {
$("a").each(function(index) {
if ($(this).attr("href").substring(0,1) == "#") {
$(this).click(function (e) {
var $href = $(this).attr("href");
$("html, body").stop().animate({
scrollTop: $($href).offset().top
}, 500,"easeInOutExpo");
e.preventDefault();
});
}
});
});
Co ten kód provádí?
- Nalezne všechny odkazy
- Pokud je prvním písmenem odkazu #, přidá efekt animace
Vaše komentáře
will 9.7.14 09:41
Tom Hnatovsky 14.7.14 15:27
Článek je z roku 2011, kdy byla funkce psána pro jQuery 1.4 a jQuery Easing 1.3
Je možné, že pro fungování s novějšími verzemi jQuery, bude potřebovat drobné úpravy.
Základem bude, zda nějaké chyby vrací JS konzole prohlížeče – od nich se dá odpíchnout.
Jaroslav Kratochvíl 22.7.13 00:50
Snažím se script rozchodit na Webnode stránkách a vůbec se mi nedaří. Nebyla by nějaká podrobnější rada? Jde o stránky www.chmelobrani.cz