smooth-scroll.js是一款轻量级的纯JS页面锚链接平滑过渡插件。通过该锚链接插件，可以在点击页面的锚链接时，以指定的过渡动画平滑滚动页面。
安装
可以通过npm或bower来安装smooth-scroll.js插件。
npm install cferdinandi/smooth-scroll
bower install /cferdinandi/smooth-scroll.git
使用方法
在页面中引入smooth-scroll.js文件。
HTML结构
在页面中构建锚链接，通过标签的href属性指向需要跳转到的锚链接元素，并为元素设置data-scroll属性。
Anchor Link
...
跳转到这里
初始化插件
在页面的底部，通过smoothScroll.init()方法来初始化该锚链接平滑过渡插件。
smoothScroll.init();
配置参数
全局配置
你可以在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属性来覆盖配置参数。例如：
data-options='{
"speed": 500,
"easing": "easeInOutCubic",
"offset": 0
}'
>
Anchor Link
事件
你可以在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属性，插件将会自动根据头部的高度来偏移滚动距离。
...
以编程的方式为所有的锚链接添加[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);
