html页面跳转href过渡效果,页面锚链接平滑动画过渡纯JS插件
smooth-scroll.js是一款简洁高效的纯JavaScript超链路平滑过渡插件。借助这一插件实现，在点击对应的超链路时可触发指定的过渡动画以实现页面平滑滚动效果。
安装
可以通过npm或bower来安装smooth-scroll.js插件。
npm install cferdinandi/smooth-scroll
bower install https://github.com/cferdinandi/smooth-scroll.git
使用方法
在页面中引入smooth-scroll.js文件。
HTML结构
在页面中创建锚点链接，在标记上使用href字段指定目标锚点链接，并设置该元素的数据卷动属性。
Anchor Link
...
跳转到这里
初始化插件
位于页面底部的部分将利用 smoothScroll.init() 方法配置该 target 标签以实现 平滑滚动效果。
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, // 表示为整数. 沿着滚动锚点偏移多少像素的距离
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'
switcher, // 用于切换动画的节点或整数. switcher可以是一个节点用于切换动画状态, 或者是一个整数. 例如: document.querySelector('#toggle’)
options // Classes and callbacks. Which are identical to the options 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属性扩展项。该插件会根据header区域的高度自动调整滚动条的位置。
...
以编程的方式为所有的锚链接添加[data-scroll]属性
借助下面提供的JavaScript代码段, 可以实现数据滚动功能于每一个超链接元素上.
;(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);