javascript - ScrollingTop 卡住了

Question

下面的代码可以很好地向下滚动，但不能滚动到顶部。当它到达底部或顶部时它会卡住。但如果不要离底部和顶部太近，它就可以正常工作。看起来如果你点击更多的时间应该是当你丰富底部时你必须点击相同的数字才能滚动到顶部。

有什么线索吗？

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

好吧......它有效:3小提示:

• .stop() 在播放另一个动画之前。
• 检查滚动条的最大值和最小值

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>