ScrollingTop gets stuck

Question

The code below is scrolling down just fine but not to top. It gets stuck when it goes to the bottom or top. But if dont be so close to the bottom and top it work fine. It seems like if you clicks more time that it should be when you rich the bottom you have to click the same number to getting scroll to top.

Any clue?

var scrolled = 0;

$(function () {
     
     

    $("#upClick").on("click", function () {
        console.log("upClick");
        scrolled = scrolled - 100;
        $(".nav").animate({
            scrollTop: scrolled
        });
    });

    $("#downClick").on("click", function () {
        console.log("downClick");
        scrolled = scrolled + 100;
        $(".nav").animate({
            scrollTop: scrolled
        });
    });
});

.arrow-button {
    cursor: pointer;
}

.arrow-button:hover {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    cursor: pointer;
}

#sidebar {
    width: 880px;
    font-weight: bold;
  
}

.nav {
    max-height: 150px;
    overflow-y:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row second-row">
        <div class="col-md-11">
            <div   id="sidebar" role="navigation" style="float:left">
                <div class="well sidebar-nav">
                    <ul class="nav">
                        <li class="active"><a href="#">Maths</a></li>
                        <li><a href="#">English</a></li>
                        <li><a href="#">Art and Design</a></li>
                        <li><a href="#">Drama</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">Physics</a></li>
                        <li><a href="#">Chemistry</a></li>
                        <li><a href="#">Biology</a></li>
                        <li><a href="#">Home economics</a></li>
                        <li><a href="#">Physical Education</a></li>
                        <li><a href="#">Computing Science</a></li>
                        <li><a href="#">French</a></li>
                        <li><a href="#">German</a></li>
                        <li><a href="#">Mandarin</a></li>
                        <li><a href="#">Religious Education</a></li>
                        <li><a href="#">Modern Studies</a></li>
                        <li><a href="#">Geography</a></li>
                        <li><a href="#">History</a></li>
                        <li><a href="#">Creative computing</a></li>
                        <li><a href="#">Craft, Design and Technology</a></li>
                    </ul>
                </div><!--/.well -->
            </div>
        </div>
        <div class="col-md-1" style="padding-left:35px;">
            <img src="images/arrow-up.png" width="70" class="arrow-button" id="upClick" />
            <img src="images/arrow-down.png" width="70" style="margin-top:50px;" class="arrow-button" id="downClick" />
        </div>
    </div>

Answer 1

When you trying scroll always remember it should not go in negative value.

At the start of your program it goes in -ve value, add condition

 $("#upClick").on("click", function () {
        console.log("upClick");
        scrolled = scrolled - 100;
        if(scrolled>0){
      $(".nav").animate({
            scrollTop: scrolled
        });  
      }
    });

Answer 2

well... it works :3 little tip:

• .stop() animation before playing another.
• check max and min value of scroll

var scrolled = 0;

    $(function () {

          $("#upClick").on("click", function () {
            console.log("upClick");
            scrolled = scrolled - 100;
            
            if(scrolled < 0) scrolled = 0;
            
            $(".nav").stop().animate({
                scrollTop: scrolled
            });
        });

        $("#downClick").on("click", function () {
            console.log("downClick");
            scrolled = scrolled + 100;
            
            if(scrolled > $(".nav").prop("scrollHeight"))
            	scrolled = $(".nav").prop("scrollHeight");
            
            $(".nav").stop().animate({
                scrollTop: scrolled
            });
        });
    });

.nav {
    max-height: 150px;
    overflow-y: auto;
}

  
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="row second-row">
        <div class="col-md-11">
            <div id="sidebar" role="navigation"  >
                <div class="well sidebar-nav">
                    <ul class="nav">
                        <li class="active"><a href="#">Maths</a></li>
                        <li><a href="#">English</a></li>
                        <li><a href="#">Art and Design</a></li>
                        <li><a href="#">Drama</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">Physics</a></li>
                        <li><a href="#">Chemistry</a></li>                   
                        <li><a href="#">Modern Studies</a></li>
                        <li><a href="#">Geography</a></li>
                        <li><a href="#">History</a></li>
                        <li><a href="#">Creative computing</a></li>
                        <li><a href="#">Craft, Design and Technology</a></li>
                    </ul>
                </div> 
            </div>
        </div>
        <div class="col-md-1" >
            <img src="images/arrow-up.png" width="70" class="arrow-button" id="upClick" />
            <img src="images/arrow-down.png" width="70"   class="arrow-button" id="downClick" />
        </div>
    </div>