JS/Jquery实现导航栏顶部吸顶效果（二）

之前我写了如何实现导航栏的吸顶效果，但是是产品需要，就简单写了一下，但是没有仔细的去把握属性，导致后来再加效果的时候遇到了些麻烦。今天这篇文章主要是写：如何在实现顶部吸顶效果的基础上点击导航栏按钮定位到特定位置。

（一）
接着第一篇文章的代码。第一点的想说的是我之前没有把握住的属性：scrollTop
第一篇文章我直接复制了一堆定义，在那里，给出的是：
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离（现在再看这个定义真的想吐槽这尼玛是个什么鬼…）
于是在我笨拙的查找下，我找到了一个简单粗暴的图。让我们甩开枯燥的文字，直接看图：

所以：document.body.scrollTop即网页被卷去的高。注意区别于offsetTop

(二)
再知道了上面这一点之后，很快就可以根据原理写出定位效果。再上一篇文章基础上增加代码：

 $('#nav li:eq(0)').click(function(event) {
        $('body,html').animate({
                scrollTop: "323"},
            2000);
    })
    $('#nav li:eq(1)').click(function(event) {
        $('body,html').animate({
                scrollTop: "703"},
            2000);
    })
    $('#nav li:eq(2)').click(function(event) {
        $('body,html').animate({
                scrollTop: "1043"},
            2000);
    })

这里定位我用了animate，模拟一种缓慢滑动的动画效果。鉴于博主还不会传动态效果图。我就po两张移动前后的图好了。

移动前：

移动后：