Comment obtenir un défilement fluide vers la position d'ancrage à l'aide de CSS

Comment obtenir un défilement fluide jusqu'à la position d'ancrage avec CSS

Dans la conception Web, la position d'ancrage fait référence à une position spécifique sur la page Lorsque l'utilisateur clique sur un lien dans la page, la page défilera en douceur jusqu'à celle-ci. position. Cet effet apporte non seulement une bonne expérience utilisateur, mais améliore également la beauté de la page. Cet article explique comment utiliser CSS pour obtenir un défilement fluide jusqu'à la position du point d'ancrage et donne des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, nous devons définir des points d'ancrage en HTML. Ajoutez un attribut id à la position où un défilement fluide est requis comme identifiant du point d'ancrage. Par exemple :

<div id="section1">
  <!-- 具体内容 -->
</div>

<div id="section2">
  <!-- 具体内容 -->
</div>

Dans le code, nous avons créé deux positions d'ancrage, définies sur section1 et section2 à l'aide de l'attribut id.

2. Style CSS

Ensuite, nous devons définir le style CSS pour obtenir un effet de défilement fluide. Tout d’abord, nous ajouterons une transition de comportement de défilement à l’élément body. En CSS, nous pouvons utiliser l'attribut scroll-behavior pour définir le comportement de défilement sur un défilement fluide. Le code est le suivant :

body {
  scroll-behavior: smooth;
}

De cette façon, lorsque nous cliquons sur le lien d'ancrage, la page défilera en douceur jusqu'à la position cible.

3. Ajouter un lien d'ancrage

Afin de faire défiler en douceur jusqu'à la position d'ancrage, nous devons ajouter un lien d'ancrage à la page. Là où vous devez faire défiler, comme un menu de navigation ou un autre emplacement de lien, utilisez une balise a pour créer un lien et définissez l'attribut href du lien sur l'ID de l'emplacement d'ancrage. Par exemple :

<a href="#section1">跳转到Section 1</a>
<a href="#section2">跳转到Section 2</a>

De cette façon, lorsque l'utilisateur clique sur le lien, la page défilera en douceur jusqu'à la position d'ancrage correspondante.

4. Considérations de compatibilité

Bien que la méthode ci-dessus puisse fonctionner normalement dans la plupart des navigateurs modernes, l'attribut scroll-behavior peut ne pas être pris en charge dans certaines anciennes versions de navigateurs. Pour garantir son bon fonctionnement dans tous les navigateurs, nous pouvons utiliser JavaScript pour obtenir un effet de défilement fluide.

// JavaScript代码示例

$('a[href*="#"]').on('click', function(e){
  e.preventDefault();

  $('html, body').animate(
    {
      scrollTop: $($(this).attr('href')).offset().top,
    },
    800,
    'linear'
  );
});

Ce code utilisera des effets d'animation pour faire défiler en douceur jusqu'à la position d'ancrage lorsque vous cliquez sur le lien d'ancrage. Il convient de noter que la bibliothèque jQuery doit être introduite pour obtenir cet effet.

Résumé

Grâce à la propriété scroll-behavior de CSS, nous pouvons facilement obtenir un effet de défilement fluide. Bien entendu, afin de garantir son bon fonctionnement sur différents navigateurs, nous pouvons également utiliser JavaScript pour obtenir cet effet. Qu'il s'agisse de CSS ou de JavaScript, l'effet de défilement fluide peut améliorer l'expérience utilisateur et rendre les pages Web plus fluides et plus belles. L'application de cette technologie à la conception de sites Web peut améliorer la qualité et l'évaluation des utilisateurs du site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!