jquery - 使用jquery在按钮单击时上下滚动div

Question

我正在尝试添加一项功能以根据按钮单击向上和向下滚动 div。我能够轻松地完成向下滚动部分，但被向上滚动部分卡住了，另一个问题是一个场景，我将解释，

单击“向下”按钮。

如果我手动向下滚动滚动条。

现在，如果我再次单击 Go Down 按钮，滚动条将转到上一个位置，因为分配有滚动值的变量具有旧值，而不是检测 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);;
 }); 

});

Answer 3

对于上涨，您只需要使用scrollTop而不是scrollBottom：

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

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

小提琴演示

Answer 4

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

Answer 5

它是从哪里来的，scrollBottom这不是它应该是的有效属性，它可以是向下（）和向上（ ）滚动的scrollTop正（+）或负（ ）值，因此您可以更改：-+-

scrollBottom 

对此scrollTop：

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

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

Answer 6

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

https://github.com/phpust/JQueryScrollDetector

Answer 7

只是添加到其他评论 - 在页面顶部禁用向上滚动是值得的。如果用户在顶部时不小心向上滚动，他们将不得不向下滚动两次才能开始

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