11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai mis en place parallaxe sur l'un de mes sites en développement, qui fonctionne parfaitement.
Maintenant, j'attaque l'accroche des ancres avec une fonction basique de Javascript, et là... les choses se corsent.
Sans cette méthode, j'accroche correctement les divs, mais sans le petit effet smooth qui fait tout sur une page parallaxe.

Le problème : La fonction me fait n'importe quoi, elle accroche un endroit au hasard dans la page.

Le contexte : Le menu qui permet de faire cela est en position fixed top 0 !

La méthode :
 //Evenement déclenché sur un click créant un scroll smooth
        $('.scrollTo').click( function() { // Au clic sur un élément
          //console.log('Appel de scrollTo');
          var page = $(this).attr('href'); // Page cible
          var speed = 750; // Durée de l'animation (en ms)
          $('.snap-content').animate( { scrollTop: $(page).offset().top }, speed ); // Go
          return false;
        });


Vous aurez remarqué que j'utilise SnapJS qui m'a posé pas mal de soucis pour la détection du scroll pour parallaxe et qui m'a obligé à revoir l'intégralité de la méthode.

Merci de votre aide. Smiley smile
Modifié par Kikimagik (13 Mar 2015 - 12:41)
Bon j'ai réussi à m'auto corriger. Violemment mais efficacement. J'ai viré SnapJS, car celui-ci me bloquait le html/body en hauteur = viewport. Du coup aucun scroll ne ce faisait sur ces deux élements.
SnapJS crée une div enfant de body avec un overflow : auto;

Je ne sais pas quelle était le problème, mais bon, utiliser parallaxe et SnapJS en même temps, c'est une mauvaise idée, pour les gens qui voudrait tenter l'expérience.. Je préfère vous arrêter de suite.

Cordialement Smiley cligne
Modifié par Kikimagik (13 Mar 2015 - 12:42)