Maison > interface Web > tutoriel CSS > le corps du texte

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

PHPz
Libérer: 2023-11-21 15:28:41
original
1981 Les gens l'ont consulté

Comment obtenir un défilement fluide vers la position dancrage à laide 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>
Copier après la connexion

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;
}
Copier après la connexion

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>
Copier après la connexion

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'
  );
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal