可制作页面锚链接平滑过渡效果的jQuery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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