Ancre douce d'une page a l'autre

Paul Bression
Javascript

Bonjour,

J'ai mon site web (qui est un OnePage) en ligne et je voudrais que quand je suis dans un projet et que je clique dans un élément de mon menu cela me redirige sur ma page d'accueil avec une ancre douce jusque la bonne position de la page.

Voir sur mon site www.paul-bression.com pour comprendre plus facilement ce que je voudrais faire.

Merci d'avance si quelqu'un peut m'apporter de l'aide

6 réponses

betaWeb

Salut,

Regarde du côté du smoothScroll ;)

Paul Bression
Auteur

Salut, Je viens de tester mais cela ne change rien a mon probleme,

Ce que je voudrais c'est un que quand je clique ca charge la page et que apres ca scroll au bonne endroit...

betaWeb

Avec les ancres tu peux le faire : lorsque tu cliques sur un lien, il faut rediriger vers la bonne page avec un hash spécifique correspondant au bloc vers lequel tu veux auto-scroller (ex. http://monsupersite.fr/competences#bloc-3). En JS, tu check si window.location.hash.length > 0, et si tel est le cas, tu fais un scroll vers cet élément (internet grouille de tutos et exemples, tu ne devrais pas avoir de mal à trouver).

SLK

Salut,

ah ben justement moi j'ai eu un problème là dessus il y a quelques jours.

Je l'avais écris en jQuery, si ça peut t'aider à l'adapter à ton code :

// si on clic sur un lien qui commence par "#" (donc, qui est une ancre)
$('a[href^="#"]').on('click', function() {
    // définit la "cible" jusqu'où aller
    var target = $( $( this ).attr('href') );

    // fait défiler l'écran jusqu'à l'ancre
    $(' body ').animate({
        scrollTop: target.offset().top
    }, 1000);
});
betaWeb

@SLK Ce n'est pas exactement ce qu'il demande. Lui veut un smooth-scroll au chargement d'une page.
Donc il lui faut adapter ton script comme ceci :

var hash = window.location.hash, $target;

if (hash && hash.length > 0) {
  $target = $(hash);

  if ($target.length > 0) {
    $('body').animate({
        scrollTop: $target.offset().top
    }, 1000);
  }
}
SLK

Ah d'accord, je n'avais pas pigé ^^