TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer un widget de défilement vers le haut pour votre site Web ?

57

Retour en haut ou faire défiler vers le haut est la fonctionnalité qui vous permet de vous déplacer vers le haut d’une page en cliquant sur une flèche généralement placée près du coin inférieur droit de la page. Il n’est toujours pas nécessaire d’utiliser une image pour une telle fonctionnalité de défilement vers le haut. Étant donné que chaque image envoie une requête HTTP distincte à votre serveur, cela ajoutera le temps de chargement global du site et la personnalisation de l’image n’est pas non plus très facile. Afin de surmonter cela, nous proposons le widget de défilement vers le haut ci-dessous avec CSS et jQuery avec une icône de police géniale au lieu d’une image afin que vous puissiez personnaliser en fonction de la mise en page de votre site.

Connexe : Comment ajouter un widget de défilement vers le haut sur le site Weebly ?

Le widget contient trois parties :

  • CSS
  • Scénario
  • HTML

1 code CSS pour le widget Retour en haut

Vous trouverez ci-dessous le code CSS du widget et collez-le dans la section d’en-tête de votre site.

<style> .backtotop { background: none; margin: 0; position: fixed; bottom: 0; right: 0; width: 55px; height: 60px; z-index: 100; display: none; text-decoration: none; color: #808080; } .backtotop i { font-size: 50px; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Remarque : Au lieu de l’image, nous utilisons l’icône de police géniale, le CSS requis est donc lié en conséquence.

2 Script jQuery pour le widget

Vous trouverez ci-dessous le script du widget qui doit être placé dans la section pied de page de votre site.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function() { $('.backtotop').css({'display': 'none'}); var offset = 200; var duration = 600; $(window).scroll(function() { if ($(this).scrollTop() > offset) { $('.backtotop').fadeIn(duration); } else { $('.backtotop').fadeOut(duration); } }); $('.backtotop').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>

3 HTML pour le widget

Et enfin, ci-dessous, le code HTML à placer dans le corps de votre page Web pour activer la fonction de retour en haut.

<a href="#" class="backtotop" style="display: inline;"> <i class="fa fa-arrow-circle-up"></i> </a>

Personnalisation des fonctionnalités de retour en haut

L’avantage d’utiliser ce widget est que vous pouvez personnaliser la fonction complète selon vos besoins. Voici quelques-unes des options de personnalisation pour vous :

Vitesse de défilement

La vitesse par défaut du défilement est définie sur 600 dans le script que vous pouvez augmenter ou diminuer.

Caractéristique Code Où regarder
Vitesse de défilement var durée = 600 ; Scénario

Position d’affichage de l’icône de défilement

L’icône en forme de flèche commencera à s’afficher lorsque la barre de défilement sera à la position 200px du haut qui est définie dans le script avec le code ci-dessous :

Caractéristique Code Où regarder
Position de départ de l’icône de défilement était décalé = 200 ; Scénario

Vous pouvez modifier la position de départ selon vos besoins.

Position de l’icône

Par défaut, l’icône de la flèche vers le haut sera affichée à 60 px vers le haut et à 55 px du coin inférieur droit, comme défini dans le style CSS. Vous pouvez le modifier par la méthode d’essais et d’erreurs pour vérifier la position appropriée pour votre site.

Caractéristique Code Où regarder
Position de l’icône de défilement dans le coin inférieur droit largeur: 55px ; hauteur: 60px ; Style

Style d’icône

Nous avons utilisé l’icône géniale de police "fa-arrow-circle-up" que vous pouvez modifier dans le code HTML.

Caractéristique Code Où regarder
Retour en haut Style d’icône <i class=”fa fa-arrow-circle-up”></i> HTML

Reportez-vous à la section des icônes directionnelles de la liste des icônes de police géniales pour utiliser une autre icône pour votre site.

Taille de l’icône

50px par défaut est utilisé comme taille de police pour l’icône dans le style CSS que vous pouvez modifier selon vos besoins.

Caractéristique Code Où regarder
Haut de la page Taille de l’icône taille de la police : 50px ; Style

Couleur de l’icône

C’est la partie la plus importante de la personnalisation où la couleur de l’icône de police peut être facilement modifiée pour s’adapter à la mise en page de votre site. Recherchez le code « couleur : #808080 ; » dans le code CSS et changez-le en n’importe quelle couleur selon vos besoins.

Caractéristique Code Où regarder
Retour en haut Couleur de l’icône couleur: #808080 ; Style

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails