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 
                
smooth-scroll.js锚链接跳转插件的github地址为：https://github.com/cferdinandi/smooth-scroll