Maison  >  Article  >  interface Web  >  Le moyen idéal pour obtenir un effet de défilement de page (Scroll) avec jQuery

Le moyen idéal pour obtenir un effet de défilement de page (Scroll) avec jQuery

巴扎黑
巴扎黑original
2017-06-29 09:39:061685parcourir

De nombreux blogueurs ont écrit/réimprimé la méthode d'utilisation de jQuery pour obtenir l'effet de défilement de page (Scroll) dans le passé, mais la plupart des méthodes trouvées jusqu'à présent ont un petit bug sous Opera : utilisez jump directement Et l'écran scintille.

Aujourd'hui, l'expert super discret Willin a partagé une méthode parfaite pour résoudre le bug de jQuery implémentant l'effet de défilement sous Opera. Je l'ai ensuite débogué+ appliqué à mon thème actuel, et cela. a été testé. C'est parfait, j'ai posté le code pour l'illustrer.

Parce que je ne connais pas grand-chose à js et que jQuery n'est que superficiel, je ne peux pas expliquer clairement le principe, je ne peux qu'expliquer la méthode de modification.

Démo : Cliquez sur "Δ" en bas du sujet actuel zOM/"x commentaires" sous le titre de la page de l'article " Laissez un commentaire

Supposons : l’identifiant supérieur de votre sujet est header, et l’identifiant inférieur « retour en haut » est top

Le code jQuery est le suivant :

document$

 windowopera ? documentcompatMode   ? $ $ $

$
scrollTop $top 
 false

Instructions : Regardez directement les commentaires

$(' #top').click(function(){...}); C'est le code de base pour le défilement. Vous pouvez l'adapter en fonction de votre propre situation, c'est-à-dire tirer des conclusions à partir d'un exemple. Par exemple : puisque vous pouvez revenir vers le haut, vous pouvez faire défiler vers le bas, faire défiler Aller jusqu'à un certain identifiant, faire défiler vers le milieu...

Ensuite, je posterai un exemple de défilement vers la "zone de commentaire"  :

Exemple de prémisse : sous le titre de l'article, il y a "Ajouter un commentaire", le html original est le suivant

<p id="add-comment"><a href="#respond"></a></p>

(Remarque : #respond est l'identifiant de la zone de commentaire)

Then $('#top').click(function( ){...}); Ce code devient le suivant :

$
scrollTop $top 
 false

C'est ça, n'est-ce pas simple ? Certains amis disent le principe, allez apprendre jQ

Pour plus de méthodes, allez sur "Plusieurs méthodes de défilement de page" de Willin

Avertissement : Cet article adopte BY-NC - Autorisé sous accord SA | ZWWoOoOo
Veuillez indiquer que la réimpression provient de "La méthode parfaite pour obtenir un effet de défilement de page (Scroll) avec jQuery"

Lire le texte intégral
Catégorie : JavascriptVoir les commentaires

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!

Déclaration:
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