it-swarm.com.de

scrollen Sie mit einem Jquery-Button einen Div-Button auf und ab

Ich versuche, eine Funktion hinzuzufügen, um ein Div auf und ab zu scrollen, basierend auf dem Klicken auf die Schaltfläche. Ich konnte den Scroll-Down-Teil problemlos ausführen, blieb aber beim Scroll-Up-Teil hängen und ein weiteres Problem war ein Szenario, das ich erklären werde:

Klicken Sie auf die Schaltfläche "Go Down".

und wenn ich manuell nach unten scrolle, ziehe die Bildlaufleiste nach unten.

wenn ich nun erneut auf die Schaltfläche "Abwärts" klicke, wird die Bildlaufleiste an die vorherige Position verschoben, da die mit dem Wert für das Scrollen zugewiesene Variable einen alten Wert hat, anstatt die aktuelle Position von Scroler zu ermitteln zeige meine Arbeit und füge auch den Code ein. Was könnte ich falsch machen mit der Scroll-Up-Option !!

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>

gibt es auch ein gutes Plugin, das diese Funktionalität hat?

10
sam

scrollBottom ist keine Methode in jQuery.

AKTUALISIERTE DEMO - http://jsfiddle.net/xEFq5/10/

Versuche dies:

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

Bildlauf durch Klicken auf die Schaltfläche.

HTML Quelltext:-

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

JQuery-Code zum Scrollen von div: -

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

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

});
5
Sunil S

Für den Aufstieg müssen Sie nur scrollTop anstelle von scrollBottom verwenden:

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

Verwenden Sie auch die Methode .stop () , um stop die aktuell ausgeführte Animation für die Variable cover zu verwenden. Wenn .stop() für ein Element aufgerufen wird, wird die derzeit laufende Animation (falls vorhanden) sofort gestoppt.

FIDDLE DEMO

2
palaѕн

Sie können dieses einfache Plugin verwenden, um Ihrer jQuery scrollUp und scrollDown hinzuzufügen

https://github.com/phpust/JQueryScrollDetector

0
user122293

Woher kam es aus scrollBottom Dies ist keine gültige Eigenschaft, es sollte scrollTop sein und dies kann positive (+) oder negative (-) Werte sein, um nach unten (+) und nach oben (-) zu scrollen. Sie können also Folgendes ändern:

scrollBottom 

zu dieser scrollTop:

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

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

Nur um weitere Kommentare hinzuzufügen - es wäre sinnvoll, das Scrollen nach oben zu deaktivieren, wenn Sie sich oben auf der Seite befinden. Wenn der Benutzer aus Versehen nach oben blättert, muss er zum Starten zweimal nach unten scrollen

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

Um Ihr anderes Problem zu lösen, bei dem Sie scrolled einstellen müssen, wenn der Benutzer manuell einen Bildlauf durchführt, müssen Sie dem Fenster-Bildlaufereignis einen Handler zuordnen. Im Allgemeinen ist dies eine schlechte Idee, da der Handler eine Menge feuert. Eine übliche Technik ist das Festlegen eines Timeouts wie folgt:

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