Les ancres en jQuery

See the Pen SCROLLTOP Jquery by yuyazz (@yuyazz) on CodePen.

Avec la fonction scrollTop je vais pouvoir jouer avec des ancres et rendre ainsi la navigation plus facile..c’est rapide à appliquer et l’animation (fonction animate) apporte un côté moderne à la page. Pour l’exemple, je crée ici une liste avec des liens vers mes ancres. Devant chaque lien, on place donc un # qui correspond à l’ID de la section.

    <body>
      <nav>
            <ul>
                <li><a href='#niveau1'>niveau1</a></li>
                <li><a href='#niveau2'>niveau2</a></li>
                <li><a href='#niveau3'>niveau3</a></li>
            </ul>

        </nav>
        <div class="wrapper">
            <section id="niveau1">
                <h1> du texte</h1>
            </section>
            <section id="niveau2">
                <h1>du texte</h1>
            </section>
            <section id="niveau3">
                <h1> du texte</h1>
            </section>
        </div>

Voici le code jQuery :

      $(document).ready(function() {
                $('a[href^=#]').click(function() {
                    var cible = $(this).attr('href');
                    var hauteur = $(cible).offset().top;
                    $('html, body').animate({scrollTop: hauteur}, 1000);
                });
            });

On applique notre fonction au click sur un des liens, et on récupère la valeur de ce lien avec :

 $(this).attr('href');

Ensuite on applique notre scrollTop qu l’on anime avec la fonction animate pour atténuer le passage d’une section à l’autre. Ce code est vraiment un exemple simple, l’idéal dans ce genre de cas est bien sûr d’avoir une liste de liens, ou un menu fixe, de sorte que l’utilisateur puisse cliquer et sauter de section en section sans avoir à remonter toute la page !

27/03/2014 Mis à jour le 19/12/2018 Par Copier coller | Dans jQuery