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