javascript控制模块滚动到特定位置

之前一篇文章描述了如何在一个特定的地方添加属性，现在我们就要针对这个属性进行下一步操作——让模块自动滚动到这个位置。

之前有在w3school上看到window.scroll()这个函数，不过好像只能让整个浏览页面滚动，而不是其中一个特定的模块。

不过从scroll出发，我们可以进行一下搜索。发现jquery有个scroll函数，不过从描述上看，是用来获取scroll事件。而我们是想通过脚本出发scroll，这也不是我想要的。

最后小白的我找到了这样一个例子：http://jsfiddle.net/pixelass/uaewc/2/

它的滚动对象是$('#listofstuff')，基本和我的类似。

实现方式是获取起始位置和目标位置，然后让模块滚动中间的差值就OK。

我实现的方式是：

    target = $('#navigation-bar .active').position().top;
    len_to_scroll = target - $('#navigation-bar').position().top;
    $('#navigation-bar').animate({scrollTop: len_to_scroll},1000);

好方便啊。把这部分加到一个button的代码里就OK~

乍一看是很正常的，但是多点几次button就会发现，奇怪，偶数次的时候为什么模块会自动回滚到开头呢？

后来我理解了，在模块以及滚动到特定的位置之后，下一次触发程序时target的大小就变了目标'active'现在位于页面上的位置，而这个#navigation-bar是整个模块的id，是固定位置的，所以相对距离变短。如果再调用最后一行，就会让模块回滚到开头。

这里就需要判断显示的窗口大小，如果滚动距离小于窗口长度，当然就不用滚动了~

所以最后的代码是：

    target = $('#navigation-bar .active').position().top;
    len_to_scroll = target - $('#navigation-bar').position().top;
    if (len_to_scroll > $('#navigation-bar').height()) {
        $('#navigation-bar').animate({scrollTop: len_to_scroll},1000);
    }

$('#navigation-bar').height()<span style="font-family: Arial, Helvetica, sans-serif;">就是模块的窗口高度。</span>

再运行的时候就非常完美了~