网站开发常用jQuery插件总结(13)定位插件scrollto

时间:2022-06-21 08:06:46

一.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插件用于页面滚动时,固定某元素的位置不变。

在线演示:定位插件scrollto