Question

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

点击“Go Down”按钮。

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

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

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()方法停止 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，您必须将处理程序附加到窗口滚动事件。通常这是一个坏主意，因为处理程序将激活很多，一种常见的技术是设置超时，如下所示：

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

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

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

7 个答案: