Maison > interface Web > js tutoriel > 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

巴扎黑
Libérer: 2017-06-29 09:39:06
original
1712 Les gens l'ont consulté

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
Copier après la connexion

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>
Copier après la connexion

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

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

$
scrollTop $top 
 false
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal