页面锚链接平滑动画过渡纯JS插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

smooth-scroll.js是一款轻量级的纯JS页面锚链接平滑过渡插件。通过该锚链接插件，可以在点击页面的锚链接时，以指定的过渡动画平滑滚动页面。

安装

可以通过npm或bower来安装smooth-scroll.js插件。

npm install cferdinandi/smooth-scroll
bower install https://github.com/cferdinandi/smooth-scroll.git

使用方法

在页面中引入smooth-scroll.js文件。

<script src="dist/smooth-scroll.js"></script>

HTML结构

在页面中构建锚链接，通过<a>标签的href属性指向需要跳转到的锚链接元素，并为<a>元素设置data-scroll属性。

<a data-scroll href="#bazinga">Anchor Link</a>
...
<h3 id="bazinga">跳转到这里</h3>

初始化插件

在页面的底部，通过smoothScroll.init()方法来初始化该锚链接平滑过渡插件。

<script type="text/javascript">
    smoothScroll.init();
</script>

配置参数

全局配置

你可以在init()方法中传入配置参数或回调函数。

smoothScroll.init({
    selector: '[data-scroll]', // Selector for links (must be a valid CSS selector)
    selectorHeader: '[data-scroll-header]', // Selector for fixed headers (must be a valid CSS selector)
    speed: 500, // Integer. How fast to complete the scroll in milliseconds
    easing: 'easeInOutCubic', // Easing pattern to use
    offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
    updateURL: true, // Boolean. If true, update the URL hash on scroll
    callback: function ( anchor, toggle ) {} // Function to run after scrolling
});

selector：锚链接的CSS选择器。
selectorHeader：固定头部的选择器。
speed：完成滚动动画的时间，单位毫秒。
easing：easing过渡动画效果。
offset：滚动的偏移距离，单位像素。
updateURL：是否在滚动时更新UTL的hash地址。
callback：回调函数。

Easing动画参数：

Linear：线性动画。
Ease-In：速度逐渐增加。
- easeInQuad
- easeInCubic
- easeInQuart
- easeInQuint
Ease-In-Out：速度先逐渐增加，然后逐渐减小。
- easeInOutQuad
- easeInOutCubic
- easeInOutQuart
- easeInOutQuint
Ease-Out：速度逐渐减小。
- easeOutQuad
- easeOutCubic
- easeOutQuart
- easeOutQuint

通过data属性来覆盖配置

你也可以通过data-options属性来覆盖配置参数。例如：

<a data-scroll
   data-options='{
                    "speed": 500,
                    "easing": "easeInOutCubic",
                    "offset": 0
                }'
>
    Anchor Link
</a>

事件

你可以在js代码中调用锚链接的滚动动画。

animateScroll()：滚动到一个锚链接。

smoothScroll.animateScroll(
    anchor, // ID of the anchor to scroll to. ex. '#bazinga'
    toggle, // Node that toggles the animation, OR an integer. ex. document.querySelector('#toggle')
    options // Classes and callbacks. Same options as those passed into the init() function.
);

示例1：

smoothScroll.animateScroll( '#bazinga' );

示例2：

var toggle = document.querySelector('#toggle');
var options = { speed: 1000, easing: 'easeOutCubic' };
smoothScroll.animateScroll( '#bazinga', toggle, options );

示例3：

smoothScroll.animateScroll( 750 );

escapeCharacters()：转义特殊字符。

示例：

var toggle = smoothScroll.escapeCharacters('#1@#%^-');

destroy()：销毁当前的smoothScroll.init()。
示例：
```
smoothScroll.destroy();
```

小技巧

固定头部

为你的固定头部添加data-scroll-header属性，插件将会自动根据头部的高度来偏移滚动距离。

<nav data-scroll-header>
    ...
</nav>

以编程的方式为所有的锚链接添加[data-scroll]属性

可以通过下面的JavaScript代码以编程的方式为页面中的所有锚链接添加[data-scroll]属性。

;(function (window, document, undefined) {

    'use strict';

    // Cut the mustard
    var supports = 'querySelector' in document && 'addEventListener' in window;
    if ( !supports ) return;

    // Get all anchors
    var anchors = document.querySelectorAll( '[href*="#"]' );

    // Add smooth scroll to all anchors
    for ( var i = 0, len = anchors.length; i < len; i++ ) {
        var url = new RegExp( window.location.hostname + window.location.pathname );
        if ( !url.test( anchors[i].href ) ) continue;
        anchors[i].setAttribute( 'data-scroll', true );
    }

    // Initial smooth scroll (add your attributes as desired)
    smoothScroll.init();

})(window, document);

smooth-scroll.js锚链接跳转插件的github地址为：https://github.com/cferdinandi/smooth-scroll