web-dev-qa-db-fra.com

faire défiler de haut en bas un clic sur un bouton en utilisant jquery

J'essaie d'ajouter 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 ajouter 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;
});


});


<div class='header'><button id='upClick'>Go Up</button> <button id='downClick'>Go Down</button><button class='clearValue'>Clear Value</button> </div>


 <div class='cover'><div class='rightSection'></div></div>

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

jqueryscroll
10
sam

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
     });
   });
22
Chamara Keragala

Défilement div en un clic de bouton.

Code HTML:-

 <div id="textBody" style="height:200px; width:600px; overflow:auto;">
    <!------Your content---->
 </div>

Code JQuery pour le défilement div: -

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

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

});
5
Sunil S

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

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

En outre, utilisez la méthode .stop () pour arrêter l'animation en cours d'exécution sur la variable 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.

FIDDLE DEMO

2
palaѕн

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

https://github.com/phpust/JQueryScrollDetector

0
user122293

scrollBottom ce n'est pas une propriété valide mais scrollTop. Ce peut être positif (+) ou négatif (-) pour faire défiler vers le bas (+) et monter (-).

scrollBottom

à cette scrollTop:

$("#upClick").on("click", function () {
    scrolled = scrolled - 300;

    $(".cover").animate({
        scrollTop: scrolled
    });//^^^^^^^^------------------------------this one
});
0
Jai

Juste pour ajouter à d’autres commentaires - il serait intéressant 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à en haut, il devra défiler deux fois pour commencer.

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

Pour résoudre votre autre problème, où vous devez définir scrolled si l'utilisateur fait défiler manuellement, vous devez associer un gestionnaire à l'événement de défilement de fenêtre. En règle générale, il s'agit d'une mauvaise idée car le gestionnaire déclenchera beaucoup , une technique courante consiste à définir un délai d'expiration, comme suit:

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