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

// 延迟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>

2. 滚动至某hash前150px的位置

<a href="#wambo">150px before #wambo</a>

在正文位置添加data-menu-offset属性

<h1 id="wambo" data-menu-offset="-150">Wambo</h1>

3. 滚动至1000px的位置

在链接添加data-menu-top属性

<a href="#section1" data-menu-top="1000">1000 pixels down</a>

4. 页面滚动75%

在链接添加data-menu-top属性，百分比单位为p

<a href="#awesome" data-menu-top="75p">75% down</a>

5. 设置滚动动画时间

在链接添加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
});