JQUERY插件之SCROLLTOANYWHERE

闲着无聊，自己写了一款jQuery插件，名字就叫ScrollToAnyWhere，下面来介绍下。
github项目地址：https://github.com/king2088/jquery.ScrollToAnyWhere
jquery.ScrollToAnyWhere.js是一个jQuery滚动插件，基本上，只要给出元素id或class，即可实现滚动。其中包含了，滚动到顶部(Scroll to Top)、滚动到底部(Scroll to Bottom)、滚动到任意位置(Scroll to AnyWhere)。

兼容性 Browser Compatibility

什么，你还在用IE6？一个插件，大家都很在乎兼容性，本人鄙视IE，因此仅支持jQuery 2.0版本以上的jQuery版本，2.0版本以下未进行过测试，IE10以下浏览器未进行测试。不支持IE9及以下版本浏览器。
IE9- NO WAY.
jquery library 2.0+

使用方法

1、导入jQuery文件 Import jQuery library

在html代码head或者body标签中引入jQuery库和jquery.ScrollToAnyWhere.js
Include jquery library and jquery.ScrollToAnyWhere.js in html tag for head or body

<head>
<meta charset="UTF-8">
<title>jquery.ScrollToAnyWhere.js demo</title>
<link rel="stylesheet" href="../css/ScrollToAnyWhere.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/jquery.ScrollToAnyWhere.js"></script>
</head>
<!--or-->
<body>
<!--html代码内容......-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/jquery.ScrollToAnyWhere.js"></script>
</body>

2、使用方法

1	$('selector').ScrollToAnyWhere(op,elements,options);

op有3个值，分别是‘top’，‘down’，‘anywhere’，分别代表‘上’，‘下’，‘任意位置’
elements为需要滚动到的位置元素id或class名称，必须带有‘.’与‘#’
options有3个固定名称，值可以任意改变。分别是’offset’，’offset_opacity’，’times’，分别代表‘距离顶部距离（当距离顶部为多少时，淡出相应的图标、文字）’，‘滚动条滚动到的位置（到达此位置时，图标或文字自动透明）’，‘滚动速度’

3、滚动到顶部(Scroll to Top)

<body>
<!--html代码内容......-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/jquery.ScrollToAnyWhere.js"></script>
<script>
$(function () {
$('.goTop').ScrollToAnyWhere('top');
})
</script>
</body>

4、滚动到底部(Scroll to Bottom)

<body>
<!--html代码内容......-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/jquery.ScrollToAnyWhere.js"></script>
<script>
$(function () {
    $('.goDown').ScrollToAnyWhere('down');
})
</script>
</body>

滚动到任意位置(Scroll to AnyWhere)
使用方法为$(selector).ScrollToAnyWhere(‘anywhere’,selector),第一个selector为当前产生事件的元素，第二个selector则为将要滚动到的元素。两个selector都需要填写正确的class与id名称，如$(‘#div’).ScrollToAnyWhere(‘anywhere’,’.class’)或$(‘#div’).ScrollToAnyWhere(‘anywhere’,’#class’)

<body>
//html代码内容......
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/jquery.ScrollToAnyWhere.js"></script>
<script> 
$(function () {
    $('.goComments').ScrollToAnyWhere('anywhere','.comments'); 
})
</script>
</body>

自定义可选参数(options)

<body>
<!--html代码内容......-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/jquery.ScrollToAnyWhere.js"></script>
<script>
$(function () {
    $('.custom').ScrollToAnyWhere('anywhere','.test',{
        'offset':500,
        'offset_opacity':1500,
        'times':50
    });
})
</script>
</body>

1	<head>
2	<meta charset="UTF-8">
3	<title>jquery.ScrollToAnyWhere.js demo</title>
4	<link rel="stylesheet" href="../css/ScrollToAnyWhere.css">
5	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
6	<script src="js/jquery.ScrollToAnyWhere.js"></script>
7	</head>
8	<!--or-->
9	<body>
10	<!--html代码内容......-->
11	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
12	<script src="js/jquery.ScrollToAnyWhere.js"></script>
13	</body>

1	<body>
2	//html代码内容......
3	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
4	<script src="js/jquery.ScrollToAnyWhere.js"></script>
5	<script>
6	$(function () {
7	$('.goComments').ScrollToAnyWhere('anywhere','.comments');
8	})
9	</script>
10	</body>