文本/链接
页面锚链接平滑过渡效果jQuery插件
PetitQ
jquery.anchorScroll.js 是一款可以制作页面锚链接平滑过渡效果的 jQuery 插件。该插件属于轻量级插件，简单易用，内置模糊和弹性特效，并提供回调函数共开发者使用。
使用方法:
在页面中引入 jquery 和 jquery.anchorScroll.js 文件。
也想出现在这里？联系我们吧
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.anchorScroll.js"></script>
HTML 结构:
你可以在超链接元素上通过 data-*属性来直接初始化该插件。
<!-- 在body滚动时添加模糊效果 "blur-effect" -->
<a href="#div-1" class="anchor-scroll" data-class-to="body" data-on-scroll="blur-effect"></a>
<!-- 在滚动结束时为目标div添加弹性效果 -->
<a href="#div-2" class="anchor-scroll" data-class-to="#div-2" data-scroll-end="bounce"></a>
可用的 data-*属性有：
data-class-to：要添加平滑滚动事件的元素
data-on-scroll：在滚动时添加到指定元素上的 class 类
data-scroll-end：在滚动结束后添加到指定元素上的 class 类
初始化插件:
你页可以通过 js 代码来初始化该插件。
$('.anchor-scroll').anchorScroll({
scrollSpeed: 800, // scroll speed
offsetTop: 0, // offset for fixed top bars (defaults to 0)
onScroll: function () {
// callback on scroll start},
scrollEnd: function () {
// callback on scroll end}});
jquery.anchorScroll.js 页内锚链接平滑滚动插件的 github 地址为：https://github.com/virgiliud/jquery.anchorScroll
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
