Javascript jqueryanimate赢得'；行不通

当我点击一个链接时，我试图让列表项上下滚动。我就是不能让它工作

更新：添加了

jQuery:

$(document).ready(function() {      
    //console.log($('.nav-up'));
$('.nav-controls').on('click', '.nav-up', function(e) {
    e.preventDefault();
    //alert('clicked');
    var navHeight = $(e.currentTarget).closest('.horz-scroll').find('.block-nav').height();
    var el = $(e.currentTarget).closest('.horz-scroll').find('.block-nav > ul');
    if((el.height() - navHeight) < el.position().top) {
        el.animate({ top: '+=19' }, 'fast');
        console.log(el.css('top'));
    }
});});

    <div class="horz-scroll">
<div class="block-nav-wrapper">
<div class="block-nav">
<ul>
    <li>
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div>
    </li>
    <li>
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div>
    </li>
    <li>
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div>
    </li>
    <li>
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div>
    </li>
    <li>
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div>
    </li>
</ul>
</div>
</div>

<div class="nav-controls">
<ul>
    <li><a class="nav-up" href="#"><img src="../../../upload/1/img/prev.jpg" /></a></li>
    <li><input class="nav_down" name="submit" src="../../../upload/1/img/next.jpg" type="image" /></li>
</ul>
</div>
</div>

.nav-controls {
    right: 10px;
    top: 25px;
    margin-left: 37%;
}

.nav-controls ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-controls ul li{
    display: inline;
    padding-right: 16px;
}
.block-nav-wrapper {
    position: relative;
    margin-bottom: 10px;
    padding: 10px;
}

.block-nav {
    position: relative;
    height: 130px;
    margin: 10px;
    overflow: hidden;
}
.block-nav ul{

}
.block-nav ul li{
    list-style:none;
    line-height:35px;
}


console.log(el.height()); = 175
console.log(navHeight); = 130
console.log(el.position().top); = 0

---

在你得到答案之前要做几件事

如果要使用jQuery，就必须将它包括在小提琴中

如前所述，使用占位符站点（我交换了所有要使用的内容）

现在，小提琴来了：。缺少的主要内容是您试图移动的

上的

位置：相对
。但是javascript也有一些逻辑问题

CSS:

.block导航ul{
位置：相对位置；
}

JS:

$（'.nav controls'）。打开（'click'，'.nav up'，函数（e）{
e、 预防默认值（）；
//警报（“点击”）；
var navHeight=$（e.currentTarget）.closest（'.horz scroll'）.find（'.block nav'）.height（）；
var el=$（e.currentTarget）.最近（'.horz scroll'）。查找（'.block nav>ul'）；
如果（（高程（）-导航高度）>数学abs（高程位置（）.顶部））{
动画片({
顶部：'-=19'
}“快”）；
console.log（el.css（'top'））；
}
});
检查
el.height（）、navHeight、el.position（）.top的值
当我测试代码时，您的条件可能是错误的el.position（）.top=0:）是的，刚刚用控制台的值更新了我的帖子。您的条件不满足，因此它不起作用。如果我将操作更改为>符号，它仍然不起作用。