使用jquery在按钮单击上向上和向下滚动div

Question

我正在尝试添加一个功能,根据按钮单击向上和向下滚动div.我能够轻松地向下滚动部分,但是卡住了向上滚动的部分,还有一个问题是一个场景,我将解释,

单击"下移"按钮.

如果我手动向下滚动向下拖动滚动条.

现在,如果我再次单击"下移"按钮,滚动条将转到上一个位置,因为分配了滚动值的变量具有检测scroler当前位置的旧值.我将添加一个jsfiddle链接显示我的工作并粘贴代码.我也可以通过向上滚动选项做错!

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>

还有一个很好的插件,具有此功能??

Answer 1

scrollBottom 不是jQuery中的方法.

更新的演示 - http://jsfiddle.net/xEFq5/10/

试试这个:

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

Answer 2

单击按钮滚动div.

Html代码: -

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

用于滚动div的JQuery代码: -

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

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

});