使用jQuery在div单击上上下滚动div [英] scroll up and down a div on button click using jquery

问题描述

我正在尝试添加一项功能，以基于按钮单击来上下滚动div.我能够轻松地进行向下滚动，但是卡住了向上滚动部分，还有一个问题是场景，我将对此进行解释，

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,

点击下移"按钮.

，如果我手动向下滚动，请向下滚动滚动条.

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

现在，如果我再次单击下移"按钮，则滚动条将转到上一个位置，因为分配了用于滚动的值的变量具有旧值，而不是检测scroler的当前位置. jsfiddle链接显示我的工作，并粘贴代码.我也可能在使用向上滚动选项时做错什么！！

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??

推荐答案

scrollBottom不是jQuery中的方法.

scrollBottom is not a method in jQuery.

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

尝试一下:

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

这篇关于使用jQuery在div单击上上下滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！