Po kliknutí na <a href=“#kotva“ class=“smooth-scroll“>sjeď na kotvu</a> stránka neskočí nárazově na element s id=kotva, ale sjede na ni pomocí animace. Ostatní odkazy se chovají normálně, jenm ty které začínají na # budou všechny mít tuto funkci.

Javascript:


//pokud kliknu na a s class="smooth-scroll" a má v href #, tak sjeď na id
$("a.smooth-scroll[href*='#']").on('click', function(e) {
var hash = this.hash;
if($(hash).length>0){
e.preventDefault();
$('html, body').animate({
scrollTop: $(hash).offset().top - 200
}, "slow", function(){
if(history.pushState) {
history.pushState(null, null, e.target.hash);
} else {
window.location.hash = e.target.hash; // for old browsers
}
});
//v bootstrapu zavři mobilní menu
if($(document).width()<768){ $('.navbar-collapse').collapse("hide");}
}
});
//při načtení stránky sjeď na kotvu
if(window.location.hash) {
var urlhash = window.location.hash;
$('html, body').animate({
scrollTop: $(urlhash).offset().top - 200
})
}

nebo

$('a').click(function(ev) {
if($(this).attr('href').charAt(0)=="#"){
ev.preventDefault();
var href=$(this).attr('href').split("#");
href=href[1];
$('html, body').animate({scrollTop: $("#"+href).position().top-50}, 800);
}
})

Kategorie: Poznámky

1 komentář

marvays · 12.12.2019 v 11:13

NĚCO DĚLÁM ŠPATNĚ, ALE MI TO NEFUNGUJE 🙁 Škoda

Napsat komentář

Vaše emailová adresa nebude zveřejněna.

This site uses Akismet to reduce spam. Learn how your comment data is processed.