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

问题描述

我正在尝试添加一项功能，以便根据按钮点击上下滚动 div.我能够轻松地完成向下滚动部分，但在向上滚动部分时卡住了，另外一个问题是场景，我将对此进行解释，

点击向下"按钮.

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

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

http://jsfiddle.net/xEFq5/7/

var scrolled=0;$(document).ready(function(){$("#downClick").on("click" ,function(){滚动=滚动+300；$(".cover").animate({scrollTop:滚动});});$("#upClick").on("click" ,function(){滚动=滚动-300；$(".cover").animate({scrollBottom:滚动});});$(".clearValue").on("click" ,function(){滚动=0;});});<div class='header'><button id='upClick'>Go Up</button><button id='downClick'>Go Down</button><button class='clearValue'>Clear Value</button>

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

有没有好的插件有这个功能??

解决方案

scrollBottom 不是 jQuery 中的方法.

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

试试这个:

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

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

解决方案

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
     });
   });

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