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

Bouton "Faire défiler vers le haut" - un ajout pour les pages avec beaucoup de contenu et les blogs avec de longs messages.

La nécessité d'utiliser des ancres sur le site se pose très souvent. Fondamentalement, ils sont utilisés dans de grands documents Web qui ont un contenu sous la forme de liens. En cliquant sur un tel lien, une transition instantanée vers la section désirée de la page se produit. Dans cet article, je veux montrer comment rendre cette transition fluide en utilisant un petit script. C'est-à-dire, au lieu d'une transition instantanée, la page défilera doucement jusqu'à l'endroit désiré. Et peu importe où l'ancre sera: au-dessus du lien ou ci-dessous.

Dans ce top, vous trouverez beaucoup de solutions jQuery, ainsi que des solutions en un clic qui permettent à vos visiteurs de défiler en douceur vers le haut de la page, rendant ainsi votre site web plus convivial.

D'abord, définissons ce qu'est une ancre (tout à coup quelqu'un ne sait pas). Une ancre est un signet avec un nom unique sur un endroit spécifique dans la page Web, conçu pour créer un saut par référence.

Pour créer une ancre, créez d'abord un signet à l'endroit approprié et attribuez-lui un nom en utilisant l'attribut name du tag ou attribuez simplement un attribut id avec la valeur désirée à une variable (cette méthode est utilisée plus souvent). 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 le saut vers cette ancre est le nom du marque-page avec le symbole de treillis (#) devant.

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

Revenons aux transitions douces. Ainsi, le script devrait fonctionner en cliquant sur les liens dont l'attribut href commence par la grille "#". Dans jQuery, vous pouvez faire ceci:

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

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

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

Pour modifier la valeur de l'indentation de défilement ci-dessus, nous utiliserons la méthode scrollTop . La douceur sera réalisée par une fonction animée . Voici notre dernier script pour un défilement fluide:

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

offset (). top spécifie la valeur de la marge supérieure de l'ancre (avec un identifiant égal à la valeur de l'attribut href), qui est définie sur scrollTop . A la fin, n'oubliez pas de mettre false pour annuler l'action par défaut. Il vous suffit maintenant d'insérer 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 vers un lien ...

1. Plugin jQuery topLink

Le plugin topLink jQuery développé par David Walsh, affiche un bouton pop-up "up the page" lorsque l'utilisateur a déménagé sur le site.

2. La disparition du lien "Faire défiler vers le haut" avec jQuery et CSS

Avec une description détaillée de la façon de créer un défilement "up the page" basé sur CSS et jQuery.

3. Disparition du lien "Faire défiler vers le haut" avec jQuery et CSS

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

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

Facile à installer, le script jQuery ajoute un défilement disparaissant à une page du site avec un défilement animé, avec des normales référence.

5. Plugin UQtoTop jQuery

Inspiré par l'idée géniale de jQuery par topLink Plugin de David Walsh, Matt Veroone a fait un plug-in similaire, mais avec deux différences majeures, celui-ci ne nécessite pas de travail pour que vous ajoutiez un balisage html supplémentaire ou des plug-ins supplémentaires. Cette solution ne fonctionne que lorsque l'utilisateur JavaScript est activé. Ici! Ce script utilise

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

Ce script affiche le contrôle stationnaire dans le coin inférieur droit de la page du site, qui, lorsqu'on appuie dessus, fait doucement défiler la page vers le haut. Au lieu d'être toujours visible sur l'écran de l'utilisateur, le script vous permet de déterminer le niveau de contrôle (en pixels) sur la page de l'utilisateur.

7. Smooth GoToTop WordPress plugin

Un script de défilement lisse développé par Ariel Flesler et Mohosan Bogdan en tant que plug-in pour WordPress. Sur la page des paramètres du plug-in, vous pouvez configurer css, la vitesse de disparition et la hauteur minimale en pixels.