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

我试图添加一个function，根据按钮点击向上和向下滚动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; }); }); 
Go Up Go DownClear Value 
 
 

还有一个很好的插件，有这个function??

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的JQuery代码： –

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

Answer 3

对于go up，你只需要使用scrollTop而不是scrollBottom ：

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

另外，使用.stop（）方法停止 cover div上当前运行的动画。 在元素上调用.stop() ，会立即停止当前运行的动画（如果有）。

FIDDLE DEMO

Answer 4

它是什么来自scrollBottom这不是一个有效的属性，它应该是scrollTop ，这可以是正（ + ）或负（ - ）值向下滚动（ + ）和向上（ - ），所以你可以改变：

 scrollBottom 

到这个scrollTop ：

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

Answer 5

要解决您的其他问题，如果用户需要手动scrolled则需要设置scrolled ，您必须将处理程序附加到窗口滚动事件。 通常这是一个坏主意，因为处理程序会激活很多 ，常见的技术是设置超时，如下所示：

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

Answer 6

您可以使用这个简单的插件将scrollDown和scrollDown添加到您的jQuery

https://github.com/phpust/JQueryScrollDetector

Answer 7

只是为了添加其他评论 – 在页面顶部禁用向上滚动是值得的。 如果用户在顶部时不小心向上滚动，则必须向下滚动两次才能启动

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