スクロールトップがつまずく

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（）アニメーション。
• チェックmaxとスクロール

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")) 
 
      \t 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>

Answer 2

の分値あなたがスクロールをしようと常にそれが負の値には行くべきではありません覚えています。それは-ve値に行くあなたのプログラムの開始時に

、あなたがMCVEを投稿していないのはなぜ条件

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