网上很多页面滑动都是满屏滑动效果，但是有时候不需要满屏滑动，而是想滑动到哪里就滑动到哪里，可以自由设置滑动的位置，那么这个纯js脚本可以满足这个要求，关键是可以设置偏移值，太美好了。

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

具体案例效果可以查看站酷的该专题页：http://www.zcool.com.cn/special/biye2017/

效果展示

插件下载

链接：http://pan.baidu.com/s/1migIqE0 密码：67mz

具体使用方法：

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

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

2、HTML结构

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

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

3、初始化插件

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

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

4、配置参数

你可以在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>

5、小技巧

固定头部

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

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

具体详细介绍可以查看网址：http://www.htmleaf.com/jQuery/Text-Link-Effects/201607083705.html