网站开发常用jQuery插件总结(13)定位插件scrollto
一.scrollto插件功能
scrollto用于定位页面中元素的位置,并使滚动条滚动到当前元素。
二.scrollto官方地址
https://github.com/flesler/jquery.scrollTo
在官方地址中并没有特别详细的说明,只是说插件可以按x轴、y轴滚动。可以嵌套元素,当前元素在父元素中滚动。官方提供demo下载,在demo中有应用案例,如在父元素中滚动,滚动定位的间隔时间等。
三.scrollto使用方法
1.文件引用。只需引用两个js文件,一个jquery,一个插件功能文件。
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.scrollTo.js"></script>
2.css样式文件。插件自身不需要使用样式
3.js代码。插件使用非常简单,如:
//定位到当前页面wrap元素中第4个h3元素,间隔时间为800毫秒。 $.scrollTo( '#wrap > h3:eq(3)', 800 ); //可以通过初始化定义延x轴或y轴滚动定位。详细可以看官方demo演示 $.scrollTo( '#wrap > h3:eq(3)', 800,{ axis:'x' } ); //x轴
4.html代码。指定需要定位到的元素。
在测试scrollto插件时,为了提高测试用例的功效,同时使用了scrolltofixed插件,scrolltofixed插件用于页面滚动时,固定某元素的位置不变。