javascript - click to scroll block by block using animate()

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>

Answer 1

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

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

find the working fiddel :here