下面的代码向下滚动就好了但不是顶部。当它到达底部或顶部时会卡住。但如果不是如此接近底部和顶部它工作正常。 看起来如果你点击底部丰富的时间,你必须点击相同的数字才能滚动到顶部。
有任何线索吗?
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>
&#13;
答案 0 :(得分:1)
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>
答案 1 :(得分:1)
当您尝试滚动时,请始终记住它不应该为负值。
在程序开始时,它会进入-ve值,添加条件
$("#upClick").on("click", function () {
console.log("upClick");
scrolled = scrolled - 100;
if(scrolled>0){
$(".nav").animate({
scrollTop: scrolled
});
}
});