skrollr-menu简介
skrollr-menu是一款基于skrollr的hash动画导航插件。
使用方法
引入skrollr.js：https://github.com/Prinzhorn/skrollr
引入skrollr.menu.js：https://github.com/Prinzhorn/skrollr-menu
Demo
http://www.xuanfengge.com/demo/201508/skrollr-decks/
功能
1. animate滚动至某个hash
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 延迟500ms 滚动 setTimeout(function() { var s = skrollr.init({ forceHeight: false }); skrollr.menu.init(s, { change: function(hash, top) { console.log(hash, top); } }); }, 500); |
正常hash即可
|
1 |
<a href="#awesome">#awesome</a> |
2. 滚动至某hash前150px的位置
|
1 |
<a href="#wambo">150px before #wambo</a> |
在正文位置添加data-menu-offset属性
|
1 |
<h1 id="wambo" data-menu-offset="-150">Wambo</h1> |
3. 滚动至1000px的位置
在链接添加data-menu-top属性
|
1 |
<a href="#section1" data-menu-top="1000">1000 pixels down</a> |
4. 页面滚动75%
在链接添加data-menu-top属性，百分比单位为p
|
1 |
<a href="#awesome" data-menu-top="75p">75% down</a> |
5. 设置滚动动画时间
在链接添加data-menu-top属性，值为数值，单位ms无需填写
|
1 |
<a href="#awesome" data-menu-duration="5000">#awesome over 5 seconds</a> |
详细参数
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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 }); |
不错啊。