之前一篇文章描述了如何在一个特定的地方添加属性,现在我们就要针对这个属性进行下一步操作——让模块自动滚动到这个位置。
之前有在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>
再运行的时候就非常完美了~