scroll up and down a div on button click using jqu

问题:

I am trying to add a feature to scroll up and down a div based on button click. I was able to do the scroll down part easily, but got stuck wit the scroll up part and one more concern was a scenario, which I will explain,

Click on "Go Down" button.

and if I manually scroll down dragging down the scroll bar.

and now if I click on Go Down button again, the scroll bar will go to the previous position, as the variable assigned with the value for scrolling has an old value insteading of detecting current position of scroler.. I will add a jsfiddle link to show my work and also paste the code. What could I be doing wrong wit the scroll up option too!!

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>

also is there a good plugin which has this functionality??

回答1:

scrollBottom is not a method in jQuery.

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

Try this:

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

回答2:

Scrolling div on click of button.

Html Code:-

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

JQuery code for scrolling div:-

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

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

});

回答3:

For the go up, you just need to use scrollTop instead of scrollBottom:

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

Also, use the .stop() method to stop the currently-running animation on the cover div. When .stop() is called on an element, the currently-running animation (if any) is immediately stopped.

FIDDLE DEMO

回答4:

Where did it come from scrollBottom this is not a valid property it should be scrollTop and this can be positive(+) or negative(-) values to scroll down(+) and up(-), so you can change:

scrollBottom 

to this scrollTop:

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

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

回答5:

To solve your other problem, where you need to set scrolled if the user scrolls manually, you'd have to attach a handler to the window scroll event. Generally this is a bad idea as the handler will fire a lot, a common technique is to set a timeout, like so:

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

回答6:

You can use this simple plugin to add scrollUp and scrollDown to your jQuery

https://github.com/phpust/JQueryScrollDetector

回答7:

Just to add to other comments - it would be worth while to disable scrolling up whilst at the top of the page. If the user accidentally scrolls up whilst already at the top they would have to scroll down twice to start

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