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