7 'Scroll to Top »avec des solutions jQuery

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

«Scroll to Top bouton '- add-on pour les pages avec beaucoup de contenu et un blog long post.

La nécessité d'utiliser des ancres sur place est très commun. En général, ils sont utilisés dans les grands documents Web, les contenus sont incorporés par référence. En cliquant sur un lien va passer immédiatement à une section spécifique de la page. Dans cet article, je veux montrer comment utiliser un petit script pour effectuer cette transition en douceur. C'est, au lieu d'une transition instantanée, la page sera en douceur défile au bon endroit. Et peu importe où il sera ancré: au-dessus ou en dessous des liens.

Dans ce haut, vous trouverez un grand nombre de solutions jQuery, ainsi que de faire un seul clic qui permet à vos visiteurs de faire défiler en douceur tout en haut de la page, ce qui rend votre site plus convivial.

Tout d'abord, de déterminer qu'un tel ancrage (quand quelqu'un ne sait pas). onglet Anchor appelé avec un nom unique à une page Web spécifique spot, conçu pour créer une transition vers ici.

Pour créer une ancre doit d'abord faire un signet à l'endroit approprié et lui donner un nom à l'aide du nom attribut de la balise, ou simplement assigner une balise un attribut id à la valeur désirée (cette méthode est utilisée le plus souvent, de sorte que le script sera centré sur lui). Et dans le premier et dans le second cas, le nom de l'ancre doit être unique dans la page. 

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

Comme la valeur de href pour passer à l'ancre en utilisant le nom du signet avec un symbole dièse (#) devant. 

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

Revenons à une transition en douceur. Ainsi, le script doit être déclenchée en cliquant sur le lien dont l'attribut href commence par un hachage "#". Dans jQuery vous pouvez le faire: 

  $ ( 'A [href ^ = "#"]'). Cliquez sur (function () {
  // ...
 });

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

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

Pour modifier le tiret au - dessus de la spirale va utiliser la méthode scrollTop. Lissage de la fonction sera réalisée animée. Voici un aperçu final est notre script pour le défilement régulier: 

  $ (Function () {
  $ ( 'A [href ^ = "#"]'). Cliquez sur (function () {
  cible var = $ (this) .attr ( 'href');
  $ ( 'Html, corps ») animé ({scrollTop: $ (cible) .Offset () top.}, 300).
  return false; 
  }); 
 });

décalage (). top indentation détermine la valeur de l'ancrage supérieur (avec un id égale à la valeur de l'attribut href), qui est situé dans scrollTop. A la fin de ne pas oublier de mettre le retour faux, d'annuler l'action par défaut. Maintenant, il vous suffit d'insérer ce code sur les dates de votre page (ou connecter un fichier séparé), et cela fonctionnera. Bonne chance!

solutions supplémentaires pour défilement en douceur vers le lien ...

1. jQuery TopLink Plugin

TopLink plugin jQuery développé par David Walsh, un pop-up affiche la "page up" lorsque l'utilisateur a déplacé vers le bas du site.

2. Disappearing "Scroll to top" lien avec jQuery et CSS

Une description détaillée de la façon de construire pour faire défiler "up page" est basée sur CSS et jQuery.

3. Disappearing "Scroll to top" lien avec jQuery et CSS

Simple bouton "page up" dans le coin droit du site nizhenm. Le code utilise le développement des deux premiers rouleaux et plus optimisés que les deux solutions précédentes, mais avec l'effet d'amortissement et le défilement régulier.

4. Plugin jQuery: Faites défiler jusqu'à Haut

Facile à installer, le script jQuery qui ajoute disparaître défilement vers la page du site avec animation de défilement à la normale lien.

5. UItoTop jQuery Plugin

Inspiré par la grande idée concernant plugin jQuery par David Walsh TopLink Matt Veroun fait un plug-in similaire, mais avec deux différences majeures, cela n'a pas besoin de travailler, vous avez ajouté des balises html supplémentaire ou plug-ins supplémentaires. Cette solution ne peut fonctionner que si l'utilisateur a activé JavaScript. Ici! Ce script utilise

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

Ce script affiche un contrôle stationnaire dans le coin inférieur droit de la page du site, qui, lorsqu'il est pressé défile doucement vers le haut. Au lieu d'avoir à être toujours visible sur l'écran de l'utilisateur, le script vous permet de spécifier à quelle distance ci-dessous (en pixels) sur la page de l'utilisateur, la direction du salon.

7. lisse plug - in WordPress GoToTop

script de défilement doux développé par Ariel Fleslerom et Mogosanu Bogdan comme un plugin pour WordPress. Dans la page des paramètres de plug-in, vous pouvez personnaliser css, taux de disparition et la hauteur minimale en pixels.