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; ismooth-scroll.js锚链接跳转插件的github地址为:https://github.com/cferdinandi/smooth-scroll
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!