Vous l'avez déjà vu auparavant, vous cliquez sur un lien dans la navigation et cela ne vous mène pas à une autre page mais à un point spécifique de la page en cours. Comment est-ce accompli? Avec un code HTML extrêmement basique que vous pouvez saisir en quelques secondes!
Pour aller plus loin, nous allons aussi voir comment animer la transition en utilisant un peu de jQuery.
Liens internes: l'essentiel
Comme je l'ai expliqué dans l'introduction, aujourd'hui, nous allons apprendre un truc de base et voir ensuite comment l'améliorer. Lorsque j'ai commencé à apprendre la conception Web, c'était l'une de ces choses que je me disais toujours qu'il me fallait comprendre, mais qui retardait toujours l'apprentissage. Si vous êtes dans le même bateau, cet article est pour vous.
Démo en direct: Cliquez ici
Une histoire de deux liens
Comme vous pouvez probablement le deviner, la création de liens vers une section interne de votre page nécessite non pas un mais deux liens. Tout d'abord, vous voulez ajouter le lien qui servira d'ancre à laquelle faire défiler, puis créer le lien cliquable standard comme vous le feriez normalement et le diriger vers le premier lien. Avoir un sens? Sinon, ne vous inquiétez pas, c'est plus facile que vous ne le pensez.
Pour la première partie, disons que nous mettons un lien dans un pied de page qui fera défiler vers le haut de la page, une pratique courante sur les pages plus longues. Pour insérer ce lien, nous utilisons une syntaxe avec laquelle vous pourriez être familier ou non:
Remarquez qu'au lieu du type "un href", nous avons utilisé "un nom". Ceci est important et constitue un point de départ probable si vous avez l'habitude d'insérer des liens avec l'ancien. Vous pouvez choisir ce que vous voulez comme nom, mais rappelez-vous qu'il vaut mieux utiliser quelque chose de descriptif comme nous l'avons fait ici. Assurez-vous également de bien noter le nom que vous utilisez, car nous devrons y revenir à la prochaine étape.
Une fois que le lien est prêt, il est temps d'insérer l'ancre. Essentiellement, si vous souhaitez faire défiler un point spécifique d’une page, vous devez insérer un peu de code à cet endroit pour que le lien que nous venons de créer sache où aller.
Puisque nous voulons créer un lien vers le haut de la page, nous insérerions cet extrait en haut de notre code HTML.
Il convient de noter quelques points importants. Tout d'abord, nous avons ajouté un hashtag au début du nom du lien. Cela n'apparaît pas dans le premier lien, mais c'est nécessaire dans le second. En outre, la partie texte de ce lien a été laissée en blanc. Ce n'est pas nécessaire, mais c'est en fait une option. Plus souvent qu'autrement, vous lierez probablement à un élément qui se trouve déjà dans votre mise en page, il y aura donc du contenu ici.
Construire la démo
Maintenant que vous avez compris la syntaxe, il est temps de créer une page Web de base en utilisant ce que nous avons appris. De toute évidence, nous devrons créer une page suffisamment longue pour pouvoir faire défiler. Pour ce faire, commençons par insérer de gros blocs de texte, chacun avec son propre titre.
Les quatre titres devraient nous fournir quatre endroits potentiels où faire défiler les éléments afin que nous soyons parfaitement préparés! De là, nous voulons ajouter les liens nommés aux éléments h1.
Démarrer CSS
Nous ajoutons maintenant un style de base pour ce texte. Tout ce que j'ai vraiment fait, c'est styliser les polices et ajouter un peu de marge à chaque section pour bien les répartir.
Voici à quoi ressemblent les paragraphes résultants. Super simple mais ils vont faire le travail pour ce dont nous avons besoin.
Navigation et image d'en-tête
Pour naviguer jusqu'aux ancres, nous devrons créer une série de liens dans notre code HTML à l'aide de la méthode de hashtag au début de cet article. Nous allons également ajouter une image de substitution pour nous donner un peu plus de marge de défilement.
Démo terminée: Pure HTML / CSS
Avec cela, notre démo de lien interne est terminée! Cliquez sur l'un des liens dans la navigation et ils devraient vous emmener à cet endroit de la page. Notez que, pour les ancres situées près du bas de la page, le parchemin descend le plus bas possible.
Démo en direct: Cliquez ici
Animation du défilement
Avec HTML, les liens entre ancres fonctionnent, mais la transition est assez dure.Il n'y a pas d'animation du tout, la page passe directement à l'ancre en cliquant. Que faire si nous voulons en faire un effet plus graduel afin que l'utilisateur puisse voir clairement que la page défile?
Vous pouvez effectuer l'intégralité de l'opération de liaison et de défilement en JavaScript, mais je pense que c'est une mauvaise idée, tout simplement parce que vous limitez inutilement le nombre de personnes pouvant utiliser votre site à celles dont JavaScript est activé. Au lieu de cela, il est bien préférable de définir les liens en HTML exactement comme nous l'avons fait ici, puis d'ajouter l'effet d'animation pour les utilisateurs de JavaScript. Le site fonctionnera toujours pour toute personne dont JS est désactivé, ils ne verront tout simplement pas l'animation.
Pour ce faire, nous avons besoin de trois choses. Le premier est bien sûr jQuery parce que c'est incroyable et rend tout plus facile. Le second est un petit plugin jQuery extrêmement pratique d’Ariel Flesler appelé ScrollTo et, enfin, vous aurez besoin d’un rejeton de ScrollTo appelé LocalScroll.
Cela semble compliqué mais c'est super simple. LocalScroll a été conçu dans le seul but d'animer le défilement des liens d'ancrage, ce qui en fait l'outil idéal. C'est aussi de loin la solution la plus simple à mettre en œuvre que j'ai pu trouver! La première chose à faire est de télécharger LocalScroll et de l’insérer avec jQuery dans votre code HTML (ScrollTo sera également inclus dans le téléchargement).
Ensuite, nous devons y passer l'élément parent qui contient les liens de hashtag. Dans notre cas, la div #nav contient les liens, nous l'insérerons donc dans l'extrait suivant:
Pour mettre cela en œuvre dans vos propres projets, il vous suffit de modifier la cible et, si vous le souhaitez, de spécifier une durée pour l'animation. C'est tout! Ce petit bloc de texte s’occupe de l’effet de défilement animé pour nous.
Démo terminée: Animé avec JavaScript
Voici la deuxième version de notre démo, cette fois-ci avec le jeté magique JavaScript. Comparez-la à la version précédente pour voir à quel point l'effet se sent bien avec la transition.
Démo en direct: Cliquez ici
Conclusion
En terminant, rappelez-vous qu’il est facile de créer un lien HTML avec un point de défilement de votre page. Tout ce que vous avez à faire est de configurer un lien nommé attaché à un endroit spécifique et un lien cliquable qui vous y mènera.
Après cela, si vous souhaitez rendre la transition plus progressive, utilisez jQuery et LocalScroll ensemble. Veillez à spécifier à la fois le conteneur parent de vos liens et la durée de l'animation.