Question

ul {
  padding: 0;
  margin: 0;
  height: 180px;
  overflow: auto;
}
li {
  height: 50px;
  background: pink;
  list-style: none;
  margin-bottom: 10px;
  height: 50px;
}
body {
  padding: 0;
  margin: 0;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
<button>up</button>
<button>down</button>

当我点击向下按钮时，它会如何逐块滚动？我知道.animate（）但是不知道实现我想要的逻辑......

Answer 1

我做了一个小函数来做没有插件的tis 像这样使用jquery：

$('ul').animate({scrollTop:scrollValue});

找到工作的fiddel：here

Answer 2

根据之前回答中的评论，请查看以下代码

$('#up').click(function(){
$('ul').animate({ "scrollTop": "-=100"},'fast');
}); 
$('#down').click(function(){
$('ul').animate({ "scrollTop": "+=100"},'fast');
});

除了快速之外，您还可以写

$('ul').animate({ "scrollTop": "+=100"},0);

这里0表示零延迟。

如果您需要延迟，请遵循以下代码：

var scroll=0;
$('#up').click(function(){
    if(scroll<=0){
        scroll=0;
    }
    else{
        scroll = scroll - 60;
        $('ul').animate({ "scrollTop": scroll});
    }
}); 
$('#down').click(function(){
   if(scroll>=$(document).height() )
   {
       scroll=$(document).height();
   }
    else{
          scroll = scroll + 60;
          $('ul').animate({ "scrollTop": scroll});
        }
});

单击以使用animate（）逐块滚动

2 个答案: