skrollr-menu是一款基于skrollr的hash动画导航插件。
引入skrollr.js:https://github.com/Prinzhorn/skrollr
引入skrollr.menu.js:https://github.com/Prinzhorn/skrollr-menu
http://www.xuanfengge.com/demo/201508/skrollr-decks/
// 延迟500ms 滚动 setTimeout(function() { var s = skrollr.init({ forceHeight: false }); skrollr.menu.init(s, { change: function(hash, top) { console.log(hash, top); } }); }, 500);
正常hash即可
<a href="#awesome">#awesome</a>
<a href="#wambo">150px before #wambo</a>
在正文位置添加data-menu-offset
属性
<h1 id="wambo" data-menu-offset="-150">Wambo</h1>
在链接添加data-menu-top
属性
<a href="#section1" data-menu-top="1000">1000 pixels down</a>
在链接添加data-menu-top
属性,百分比单位为p
<a href="#awesome" data-menu-top="75p">75% down</a>
在链接添加data-menu-top
属性,值为数值,单位ms无需填写
<a href="#awesome" data-menu-duration="5000">#awesome over 5 seconds</a>
var s = skrollr.init(); skrollr.menu.init(s, { // 使用 `animateTo` animate: true, //easing function 动画方法 easing: 'sqrt', scale: 2, //动画时间ms duration: function(currentTop, targetTop) { // 默认500ms. return 500; //或者可以根据当前滚动位置currentTop和目标位置targetTop进行计算 //return Math.abs(currentTop - targetTop) * 10; }, handleLink: function(link) { return 400; }, complexLinks: false, // 当hash改变时触发 change: function(newHash, newTopPosition) {}, // 是否在滚动时改变hash,默认为true updateUrl: false });