This page has been robot translated, sorry for typos if any. Original content here.

7 solutions 'Scroll to Top' sur jQuery

7 Scroll to Top решений на jQuery

Le bouton 'Scroll to Top' est un complément pour les pages avec beaucoup de contenu et les blogs avec de longs articles.

La nécessité d'utiliser des ancres sur le site se produit très souvent. Fondamentalement, ils sont utilisés dans des documents Web volumineux dont le contenu est sous forme de liens. En cliquant sur un tel lien, une transition instantanée vers la section souhaitée de la page se produit. Dans cet article, je veux montrer comment utiliser un petit script pour rendre cette transition lisse. En d’autres termes, au lieu d’une transition instantanée, la page défilera sans à-coup au bon endroit. Et peu importe où sera l'ancre: au-dessus du lien ou en dessous.

Dans cette partie supérieure, vous trouverez de nombreuses solutions jQuery, ainsi que des solutions en un clic permettant à vos visiteurs de faire défiler en douceur le haut de la page, rendant ainsi votre site Web plus convivial.

Tout d'abord, nous définirons ce que sont les ancres (tout à coup, quelqu'un ne le sait pas). Ancre est un signet avec un nom unique à un endroit spécifique d'une page Web, conçu pour créer un lien vers celle-ci.

Pour créer une ancre, vous devez d'abord créer un signet à l'endroit approprié et lui attribuer un nom en utilisant l'attribut name de la balise ou simplement attribuer un attribut id à une balise avec la valeur souhaitée (cette méthode est utilisée plus souvent, le script s'y concentrera donc). Dans les deux cas, le nom de l'ancre doit être unique dans la page.

  <a name="razdel1"> </a>
 <div id = "# razdel1"> ... </ div>

La valeur href pour la transition vers cette ancre est le nom du signet avec le symbole dièse (#) devant.

 <a href="#razdel1"> à la section 1 </a>

Revenons à des transitions en douceur. Le script devrait donc fonctionner en cliquant sur les liens pour lesquels l'attribut href commence par la grille "#". Dans jQuery, vous pouvez le faire comme ceci:

  $ ('a [href ^ = "#"]'). click (function () {
  // ...
 });

Ensuite, vous devez enregistrer la valeur de l'attribut href dans une variable:

 var target = $ (this) .attr ('href');

Pour changer la valeur d'indentation du défilement d'en haut, nous allons utiliser la méthode scrollTop . Le lissage sera mis en oeuvre par la fonction animate . Voici la forme finale de notre script à défilement lisse:

  $ (fonction () {
  $ ('a [href ^ = "#"]'). click (function () {
  var target = $ (this) .attr ('href');
  $ ('html, body'). animate ({scrollTop: $ (target) .offset (). top}, 300);
  retourne faux; 
  }); 
 });

offset (). top détermine la valeur de retrait du haut pour l'ancre (avec id égal à la valeur de l'attribut href), définie dans scrollTop . En fin de compte, n'oubliez pas de définir return false pour annuler l'action par défaut. Maintenant, il vous suffit de coller ce code dans les pages dont vous avez besoin (ou de le connecter avec un fichier séparé) et tout fonctionnera. Bonne chance!

Des solutions supplémentaires pour un défilement en douceur du lien ...

1. Plugin jQuery topLink

Le plugin topLink jQuery, développé par David Walsh, affiche un bouton contextuel «vers le haut de la page» lorsque l'utilisateur s'est déplacé vers le bas du site.

2. Fading Faites défiler vers le haut le lien avec jQuery et CSS

Avec une description détaillée de la création d’une page de défilement basée sur CSS et jQuery.

3. Fading Faites défiler vers le haut le lien avec jQuery et CSS

Un simple bouton "haut de page" dans le coin inférieur droit du site. Le code utilise le développement des deux premiers scrolls et est plus optimisé que les deux solutions précédentes, mais avec un effet d’amortissement et un défilement régulier.

4. Plugin jQuery: Faites défiler vers le haut

Script jQuery facile à installer qui ajoute le défilement invisible à une page de site avec défilement animé, avec par référence.

5. Plug-in jQuery UItoTop

Inspiré par l’idée géniale du plugin jQuery topLink de David Walsh, Matt Vaarone a créé un plugin similaire, mais avec deux différences majeures, celle-ci ne vous oblige pas à ajouter un balisage HTML supplémentaire ni des plugins supplémentaires. Cette solution ne fonctionnera que si l'utilisateur a activé javascript. Ici! Ce script utilise

6. jQuery Faites défiler jusqu'à Top Control v1.1

Ce script affiche un contrôle stationnaire dans le coin inférieur droit de la page du site. Lorsque vous cliquez dessus, il fait défiler la page doucement vers le haut. Au lieu d'être toujours visible sur l'écran de l'utilisateur, le script vous permet de déterminer dans quelle mesure (en pixels) sous le contrôle d'affichage de la page de l'utilisateur.

7. Smooth GoToTop WordPress plugin

Un script de défilement fluide développé par Ariel Flesler et Mogosan Bogdan en tant que plugin pour WordPress. Sur la page des paramètres du plug-in, vous pouvez régler le css, la vitesse de fondu et la hauteur minimale en pixels.