faire défiler un clic sur un bouton div en utilisant jquery

J’essaie d’append une fonctionnalité permettant de faire défiler une div en fonction d’un clic de bouton. J’ai pu faire le défilement facilement, mais je me suis retrouvé coincé dans la partie défilante. Un autre souci était un scénario que je vais expliquer,

Cliquez sur le bouton “Descendre”.

et si je fais défiler manuellement en faisant glisser la barre de défilement.

et maintenant si je clique à nouveau sur le bouton Descendre, la barre de défilement reviendra à la position précédente, car la variable affectée à la valeur de défilement a une valeur ancienne au lieu de détecter la position actuelle de scroler .. Je vais append un lien jsfiddle montrer mon travail et aussi coller le code. Que pourrais-je faire de mal avec l’option de défilement vers le haut aussi!

http://jsfiddle.net/xEFq5/7/

var scrolled=0; $(document).ready(function(){ $("#downClick").on("click" ,function(){ scrolled=scrolled+300; $(".cover").animate({ scrollTop: scrolled }); }); $("#upClick").on("click" ,function(){ scrolled=scrolled-300; $(".cover").animate({ scrollBottom: scrolled }); }); $(".clearValue").on("click" ,function(){ scrolled=0; }); });

aussi est-il un bon plugin qui a cette fonctionnalité?

scrollBottom n’est pas une méthode dans jQuery.

MISE À JOUR DEMO – http://jsfiddle.net/xEFq5/10/

Essaye ça:

  $("#upClick").on("click" ,function(){ scrolled=scrolled-300; $(".cover").animate({ scrollTop: scrolled }); });

Défilement div en un clic de bouton.

Code HTML:-

Code JQuery pour le défilement div: –

 $(function() { $( "#upBtn" ).click(function(){ $('#textBody').scrollTop($('#textBody').scrollTop()-20); }); $( "#downBtn" ).click(function(){ $('#textBody').scrollTop($('#textBody').scrollTop()+20);; }); });

Pour monter, il vous suffit d’utiliser scrollTop au lieu de scrollBottom :

 $("#upClick").on("click", function () { scrolled = scrolled - 300; $(".cover").stop().animate({ scrollTop: scrolled }); });

Utilisez également la méthode .stop () pour arrêter l’animation en cours d’exécution sur la div de cover . Lorsque .stop() est appelé sur un élément, l’animation en cours d’exécution (le cas échéant) est immédiatement arrêtée.

DÉMO DE FIDDLE

scrollBottom n’est pas une propriété valide. Il doit s’agir de scrollTop . Il peut s’agir de valeurs positives ( + ) ou négatives ( - ) permettant de faire défiler vers le bas ( + ) et vers le haut ( - ). Vous pouvez donc modifier:

 scrollBottom

à ce scrollTop :

 $("#upClick").on("click", function () { scrolled = scrolled - 300; $(".cover").animate({ scrollTop: scrolled });//^^^^^^^^------------------------------this one });

Pour résoudre votre autre problème, où vous devez définir le scrolled si l’utilisateur fait défiler manuellement, vous devez associer un gestionnaire à l’événement de défilement de la fenêtre. Généralement, c’est une mauvaise idée, car le gestionnaire déclenche beaucoup , une technique courante consiste à définir un délai d’attente, comme ceci:

 var timer = 0; $(window).scroll(function() { if (timer) { clearTimeout(timer); } timer = setTimeout(function() { scrolled = $(window).scrollTop(); }, 250); });

Vous pouvez utiliser ce simple plugin pour append scrollUp et scrollDown à votre jQuery

https://github.com/phpust/JQueryScrollDetector

Juste pour append à d’autres commentaires – il vaudrait la peine de désactiver le défilement vers le haut en haut de la page. Si l’utilisateur fait défiler accidentellement vers le haut alors qu’il est déjà au sumt, il devra défiler deux fois pour démarrer

 if(scrolled != 0){ $("#upClick").on("click" ,function(){ scrolled=scrolled-300; $(".cover").animate({ scrollTop: scrolled }); }); }