Click to scroll block by frame using animation ()

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>

Run codeHide result

How can I scroll down a block when I press the down button? I know .animate (), but I don’t know the logic to achieve what I want.

Answer 1

I made a small function to make tis without plugins using jquery as follows:

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

find the working file: here

Answer 2

According to the comment written in the previous answer, please check below code

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

Besides fast , you can also write

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

Here, 0 represents zero delay.

, :

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