Ancre douce & menu burger

Par Morghoot, il y a 10 ans

Les bases HTML/CSS

Bonjour,
J'ai réalisé le tuto http://www.grafikart.fr/tutoriels/html-css/menu-hamburger-responsive-512
Il est très bien expliqué et j'ai réussi à l'adapter à un de mes sites.
Cependant je souhaite utiliser un système d'ancre douce, mais du coup le menu burger ne fonctionne plus ...

$(function() { //ancre 'douce' js $('.menu a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body') .animate({scrollTop: targetOffset}, 1500);//Vitesse de glissement return false; } } }); });

C'est le script que j'utilise pour mes ancres et il marche pour le menu en forme "normale" mais dès que je passe au mode burger il ne fonctionne pas.
De plus ce script me permet de ne pas afficher les ancres dans l'url donc je souhaiterais conserver cela.
Quelqu'un aurait une solution ?
Merci

5 réponses

Grafikart, il y a 10 ans

Tu aurais un exemple en ligne ?

Grafikart, il y a 10 ans

Ok donc c'est normal, en petite résolution le 'body' n'est plus scrollable vu que l'élément .site-content devient en overflow:scroll. Donc si la résolution est petite tu dois scroller le .site-content

$('.site-content').animate...
Morghoot, il y a 10 ans

Merci j'ai pu regler mon problème partiellement grâce à toi.

J'ai changé mon script mais j'ai toujours un petit problème, c'est qu'en menu burger, quand je clique sur un lien, la première fois il me remonte tous en haut de la page et la deuxieme fois il va bien à l'endroit demandé. Ca doit venir de mon script mais comme je suis un novice en js pourrais tu m'aider ?

<script> $(function() { //ancre 'douce' js $('.menu a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top-70; if(window.innerWidth > 900) { $('body').animate({scrollTop: targetOffset}, 1500);//Vitesse de glissement }else{ $('.site-content').animate({scrollTop: targetOffset}, 1500); } return false; } } }); }); </script>

En tout cas merci pour ton aide et pour ce site, je n'ai pas hésité une seconde à devenir premium =)

Morghoot, il y a 10 ans

Je n'ai toujours pas trouvé de solution ...
Je ne comprends pas pourquoi ça déconne sur la version burger ><