Les ancres en jQuery

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 !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.