jQuery.scrollTo是一个轻量级,跨浏览器和随高度可定制的动画滚动,jQuery,使用起来非常方便,平滑效果实在。在使用之前必须先引入jQurey,jQurey版本必须在1.8以上,这样插件才会成功。
1、使用方法
$(element).scrollTo(target[,duration][,settings]);
a、其中element代表的是网页元素,也可以是窗口,比如一个css中的名为.css的class,可以写为$(.css)
b、target
这定义元件滚动到的位置。该插件支持以下设置方法:
一些有固定位置:250
一个字符串与PX固定位置:“250px”
一个字符串的百分比(容器的大小):“50%”
一个字符串,相对步:“+ = 50px”
与对象左侧和顶部 containining任何上述的:{left:250,top:”50px”}
字符串“最大”滚动到最底部。
一个字符串选择,这将是相对于元素滚动: “.section:eq(2)”
DOM元素,该元素的可能是孩子滚动:的document.getElementById(”top”)
一个jQuery对象与DOM元素: $(“#top”)
c、settings设置
axis:轴线动画:XY(default),x,y,YX
interrupt:如果属实将取消动漫,如果用户滚动。默认是假的
limit:如果真的插件不会滚动到容器的大小。默认为真
margin:如果属实,减去的边缘和边境目标元素。默认是假的
offset:添加到最终位置,可以是一个数字或者一个对象与左边和顶部
over:添加一个%的的目标尺寸:{ left:0.5,top:0.5}
queue:如果真会滚动轴,然后其他。默认是假的
onAfter(target, settings): 回调时触发动画结束(jQuery’s complete() )
onAfterFirst(target, settings): 一个回调的第一轴滚动后排队时触发
2、简单的实例
$.extend($.scrollTo.defaults, {
axis: ‘y’,
duration: 800
});
3、比如我们需要点击某元素后,让其直接平滑到另一个固定的元素处,则可以写成如下:
$(function(){
$(“.arrow”).click(function(){
$.scrollTo(‘#content’,1000);
});
});
可以看到,当我们点击.arrow元素时,将直接平滑到#content处,滚动的时间为1秒。