Implémenter une page web similaire à un portail

Introduction

Dans ce projet, vous allez apprendre à implémenter une fonctionnalité similaire à un portail sur une page web. La fonctionnalité du portail permet aux utilisateurs de localiser rapidement et de naviguer vers le contenu qu'ils souhaitent sur une page web longue.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer les fichiers et la structure du projet
• Comment implémenter la fonctionnalité du portail à l'aide de JavaScript et de jQuery
• Comment s'assurer que les boutons latéraux changent de couleur en fonction de la position de défilement de l'utilisateur

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Structurer et configurer un projet de développement web
• Utiliser JavaScript et jQuery pour manipuler le DOM et gérer les interactions de l'utilisateur
• Implémenter une fonctionnalité similaire à un portail pour améliorer l'expérience utilisateur sur une page web longue

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour compléter cette étape :

1. Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

2. Dans cette structure :

   • index.html est la page principale.
   • css est le dossier pour les fichiers de style.
   • images est le dossier pour les ressources d'images.
   • js/index.js est le fichier JS qui doit être complété.
   • js/jquery-3.6.0.min.js est le fichier de bibliothèque jQuery.

3. Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

4. Ouvrez "Web 8080" en haut de la VM et rafraîchissez manuellement pour voir la page.

Implémenter la fonctionnalité du portail

Dans cette étape, vous allez compléter le code dans le fichier js/index.js pour implémenter la fonction du portail.

1. Ajoutez le code suivant au fichier js/index.js :

$(window).scroll(function () {
  // Lorsque la page est défilée dans la plage spécifiée, les boutons latéraux correspondants changent de couleur.
  let top = scrollY;
  $("#lift a").removeClass("active-color");
  if (top >= 0 && top < 960) {
    $("#lift a:nth-of-type(1)").addClass("active-color");
  } else if (top >= 960 && top <= 1920) {
    $("#lift a:nth-of-type(2)").addClass("active-color");
  } else {
    $("#lift a:nth-of-type(3)").addClass("active-color");
  }
});

function toFunction(scrollTopVal) {
  // Cliquez sur le bouton pour défiler jusqu'à la position spécifiée.
  window.scrollTo(0, scrollTopVal);
}

2. Explications :
   • La fonction $(window).scroll() est utilisée pour détecter la position de défilement de la page.
   • Lorsque la page est défilée dans la plage spécifiée, le bouton latéral correspondant est donné un style actif (.active-color), et les styles des autres boutons sont définis par défaut (.default-color).
   • La fonction toFunction() est utilisée pour faire défiler la page jusqu'à la position spécifiée lorsque l'utilisateur clique sur les boutons latéraux.

Tester la fonctionnalité du portail

1. Revenez au navigateur et rafraîchissez la page.
2. Cliquez sur le bouton haut, milieu ou bas sur le côté de la page et observez la page se déplacer jusqu'à la plage correspondante.
3. Vérifiez que le bouton latéral correspondant est doté d'un style actif (.active-color) lorsque la page est défilée dans la plage spécifiée.

Le résultat final est montré ci-dessous :

Félicitations! Vous avez réussi à implémenter la fonctionnalité du portail dans votre projet.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.