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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!