Navigation par ancres avec effet smooth scroll

Livraison aujourd’hui par la team WebAcappella d’un tutoriel (apparemment très attendu) pour vous apprendre à donner un effet SMOOTH SCROLL aux pages de votre site ayant une navigation par ancres HTML. Au programme : appel de script, pose d’ancres HTML et création d’un menu fixe. Le tuto, dans sa version par défaut est accessible à tous les utilisateurs. Bien évidemment, cela sera à vous de le modifier comme bon vous semble en fonction de vos besoins et de vos connaissances en HTML. Bonne lecture à tous 🙂

Pour commencer en douceur, le script Smooth Scroll

La première étape consiste à insérer une ligne de code pour appeler le script « Smooth Scroll » depuis la librairie Jquery :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Copiez-collez cette ligne de code dans le HEAD de votre site et plus précisément dans les « Réglages Avancés » des « Propriétés du site ».

Ensuite, vous allez indiquer les paramètres d’animation de l’effet Smooth Scroll en collant les lignes suivantes dans les « Réglages Avancés » mais cette fois-ci rendez-vous dans les « Propriétés de la page » où vous allez proposer votre navigation par ancres :

<script>
 $(document).ready(function() {
 $('a[href*="anchor-"]').click( function() { // Au clic sur un élément
 var page = $(this).attr('href'); // Page cible
 var ancre = page.replace('#','');
 var coordonnees = $('a[name="' + ancre + '"]').offset().top;
 var speed = 750; // Durée de l'animation (en ms)
 $('html, body').animate( { scrollTop: coordonnees }, speed ); // Go
 return false;
 });
 });
</script>

Le conseil de la team : sauf si vous souhaitez modifier la durée de l’animation, nous vous conseillons fortement de ne pas toucher au contenu de ce code. Faites également attention à bien coller l’intégralité de ce code sans effacer quoique ce soit, même un simple point-virgule enlevé pourrait faire bugger le script donc pour résumer, cela ne marchera plus ! :-/

Toujours en douceur, la pose des ancres

Il vous faut maintenant poser vos ancres HTML aux endroits stratégiques de votre page. Imaginons un cas de figure : vous avez votre page d’accueil et vous souhaitez y présenter différentes « sections » qui seront accessibles depuis le menu principal du site. Exemple :

  1. Accueil (cela fera un retour vers le haut de la page)
  2. A propos (pour présenter succinctement qui vous êtes)
  3. Services (présentation rapide de vos services)
  4. Portfolio (images fancybox pour montrer vos réalisations)
  5. Contact (vos coordonnées)

Puisque vous avez 5 sections dans votre page, vous aurez donc dans votre menu 5 onglets principaux : Accueil, A propos, Services, Portfolio et Contact. Forcément, vous allez devoir poser également 5 ancres qui permettront d’accéder aux différentes rubriques.

Pour vous apprendre à poser des ancres HTML, nous vous invitons à lire ou relire l’article que nous avions publié précédemment sur ce blog et intitulé « Zoom sur les ancres HTML »

Ça se corse un peu, la création du menu fixe

Voici l’étape qui demande le plus d’attention de votre part (un petit café avant peut être utile !) : la création du menu fixe.

Pour une navigation par ancres HTML fonctionnelle, il faut que le menu de navigation soit accessible et visible à chaque instant par l’internaute. Quoi de mieux que de proposer alors un menu qui bouge en même temps que le défilement de votre page dans l’écran de l’internaute !

Pour créer votre menu, vous allez devoir insérer, dans le haut de votre page, un élément « Code HTML ». Dans cet élément « Code HTML », collez ces lignes de code :

<div style="position:fixed; text-align:left; height:100%; width:100%; 
padding-top:20px;">
 
<a style="
text-decoration:none; height:100%; width:100%; padding-left:50px;
font-family:'Open Sans';font-size:14px;font-weight:bold; color:#000" 
onmouseover="this.style.color='#FFF';" 
onmouseout="this.style.color='#000';" 
href="#anchor-accueil">Titre onglet 1</a>

<a style=
"text-decoration:none; height:100%; width:100%; padding-left:15px;
font-family:'Open Sans';font-size:14px; font-weight:bold; color:#000" 
onmouseover="this.style.color='#FFF';" 
onmouseout="this.style.color='#000';" 
href="#anchor-apropos">Titre onglet 2</a>

<a style=
"text-decoration:none; height:100%; width:100%; padding-left:15px;
font-family:'0pen Sans';font-size:14px; font-weight:bold; color:#000" 
onmouseover="this.style.color='#FFF';" 
onmouseout="this.style.color='#000';" 
href="#anchor-services">Titre onglet 3</a>

<a style=
"text-decoration:none; height:100%; width:100%; padding-left:15px;
font-family:'0pen Sans';font-size:14px; font-weight:bold; color:#000" 
onmouseover="this.style.color='#FFF';" 
onmouseout="this.style.color='#000';" 
href="#anchor-portfolio">Titre onglet 4</a>

<a style=
"text-decoration:none; height:100%; width:100%; padding-left:15px;
font-family:'Open Sans';font-size:14px; font-weight:bold; color:#000" 
onmouseover="this.style.color='#FFF';" 
onmouseout="this.style.color='#000';" 
href="#anchor-contact">Titre onglet 5</a>

</div>

Vous pouvez modifier les éléments suivants :

  • Text-decoration : none, underlined (souligné), etc
  • Font-family : nom de la police utilisée dans votre site (Arial, Open Sans, etc)
  • Font-size : taille de votre police
  • Font-weight : bold ou normal
  • Color : code hexadécimal de la couleur de votre onglet à l’état normal
  • Onmouseover..color : code hexadécimal de la couleur de votre onglet à l’effet survolé. Ex : #FFF
  • Onmouseout…color : code hexadécimal de la couleur de votre onglet une fois la souris passée sur l’onglet. Ex : #000
  • href= »#anchor-accueil » : nom de votre ancre.
  • Titre onglet : Ex : Accueil, A propos, Services, Portfolio, Nous contacter

Si vous souhaitez enlever des onglets de votre menu de navigation, supprimez simplement le code compris entre la balise <a> et </a>.

Le tutoriel est maintenant terminé puisque votre menu est créé. Testez le résultat, amusez-vous à modifier l’apparence du menu pour l’adapter aux besoins et contraintes de votre propre site internet. Et bien sûr, n’hésitez pas à nous présenter vos réalisations en commentaires ! Bon code à vous !

14 Comments

  1. Christophe

    Bonjour, novice en code… une page d’exemple de résultat aurai été sympa…

    • Team WebAcappella

      Bonjour Christophe,

      Merci pour votre commentaire au sujet de ce tutoriel. Nous n’avons pas réalisé de page d’exemple afin que tous les utilisateurs, novices ou non, puissent bien suivre le tutoriel et s’approprier les techniques de base d’intégration sans être influencé par un modèle. Si vous souhaitez savoir à quoi ressemble l’effet « smooth scroll », nous vous invitons à taper « plugin jquery smooth scroll » dans votre moteur de recherche et vous trouverez plein d’exemples de démo.

      Bon test à vous 🙂

  2. Elisabeth

    Bonjour,
    j’ai testé la procédure; ça fonctionne, mais il y a un problème : tous les liens que j’ai mis dans la page ainsi que une mini page fancybox que j’ai installé auparavant deviennent inopérants :-/. Quand j’enlève à nouveau les scripts tout refonctionne. Que faire?
    merci

    • Team WebAcappella

      Bonjour Elisabeth,

      Vous rencontrez apparemment un problème d’interactions entre le code utilisé pour créer votre « mini-page fancybox » et le script « smooth scroll ». Il n’est jamais bon ni conseillé d’intégrer trop de scripts extérieurs dans un site réalisé avec WebAcappella. Nous vous conseillons donc de faire un type d’intégration pour un effet : soit le smooth scroll soit l’effet « mini-page fancybox ». Dans tous les cas, nous serions ravis de voir le résultat de vos tests 🙂

      Bonne création web à vous,

      La team,

      • Elisabeth

        est-il possible de savoir comment mettre de la couleur en fond, si je veux que le menu reste sur une bande couleur grise par exemple? . Pour l’instant le fond est transparent. merci.

      • Elisabeth

        Bonjour, Voici le résultat du test sur ce site publié (http://www.parcours-floravie.fr/artfloral2/index.html) . Ce script est le seul script extérieur que j’ai mis sur ce site. Mais toujours ce petit problème des liens qui deviennent inactifs sur la page (pas dans le pied de page, fait à part…) : que les liens soient en forme de bouton ou sur le texte directement, c’est pareil. Par ailleurs j’ai toujours le problème de couleur de fond de la barre de menu (à la publication la couleur prend toute la page.) Merci pour les conseils.

  3. Christian

    Merci à Webacappella d’avoir fourni les codes nécessaires à la création de ces traitements et de tenir compte des souhaits formulés par les utilisateurs. Je me réjouis d’essayer.

    J’en profite pour solliciter ceci: il serait utile de pouvoir paramétrer dans Webacappella l’interligne des blocs de textes, sans avoir à paramétrer un code.

    Cordialement,
    Christian

    • Team WebAcappella

      Bonjour Christian,

      Merci pour vos encouragements et votre suggestion d’amélioration du logiciel. 🙂

      La team,

  4. SR-Pro

    Merci pour ce tuto 🙂
    Paramétrable à souhait, c’est exactement ce que je cherchais!

    • Team WebAcappella

      Bonjour,

      Merci pour votre retour sur le tutoriel. Cela fait plaisir de savoir que cela est utile !

      Bonne création à vous,

      La team,

  5. easyneo

    Super B-) enfin …

    J’ai essayé de parmamètrer une couleur de fond en dessous des menus.

    Sa à l’air de marcher Merci de vos feedBack’s

    A+

  6. easyneo

    Super B-) enfin …

    J’ai essayé de paramétrer une couleur de fond en dessous des menus.

    voir ici le résultat:
    http://www.webhd.ch/smooth.html

    Sa à l’air de marcher Merci de vos feedBack’s

    A+

  7. easyneo

    Ce qui serait super maintenant c’est paramétrer la même chose mais depuis une image ou une zone de couleur sur la page directement dans les paramètres liens de l’élément sous JS (vert) myFunction (‘param1’); … Votre aide serait précieuse !

  8. BONNET

    Très bien ce tutoriel, j’ai réussi à faire exactement ce que je veux…. maintenant j’aimerai bien pouvoir exactement la même chose mais en cliquant sur une image et non sur un menu texte ; quelqu’un a t-il la solution ?

Commentaires fermés