单击以使用animate()逐块滚动 [英] click to scroll block by block using animate()

问题描述

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()，但不知道实现我想要的逻辑.

How can when I click on the down button, it will scroll block by block? I know .animate() but couldn't know the logic to achieve what I want ..

推荐答案

我做了一些小的功能，可以在没有插件的情况下进行操作 像这样使用jquery:

i made small function to do tis without plugins using jquery like so :

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

找到工作对象: 此处

find the working fiddel :here

这篇关于单击以使用animate()逐块滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！