全页鼠标滚动带有easeInCirc效果滚动

时间:2014-06-13 02:46:00

标签: jquery scroll mousewheel jquery-easing

我给我的html页面提供了部分,每个部分都有100%的宽度和高度来获得屏幕尺寸。身体和部分溢出是隐藏的,因为我不想显示滚动条。而不是它,我想只使用菜单和鼠标滚轮在各部分之间导航。

问题是我不知道如何调整我在网上找到的脚本它应该一次只滚动一个部分(100%高度)...如果你能纠正我的脚本:

$(document).ready( function() {
    $('body').mousewheel(function(event, delta) {
        if (delta < 0) {
            $('body').scrollTo('+=800', 1500, {easing : 'easeInCirc'});
        }
        else {
            $('body').scrollTo('-=800', 1500, {easing : 'easeInCirc'});
        }
    return false;
    }); 
});

(我表示+ = 800和 - = 800,因为我认为这是像素,它甚至不是这样的。无论如何,我需要100%而不是精确的像素......)

HTML很简单:

<body>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</body>

这是我的测试页面:http://photography.igorlaszlo.com/test.html - 菜单已经按照我想要的方式做了(除了粘性效果还不完美,无所谓)。

以下是我想做的一个很好的例子:http://www.atelier-serge-thoraval.com

提前致谢!

1 个答案:

答案 0 :(得分:2)

好的,这很疯狂,但当我在这个网站上提出问题时,我总能找到答案......而不是之前! :)因为当我输入标题时,侧边栏会提出相关链接(我刚才发现)。这也是由于我的英语,我需要在谷歌或这里找到合适的词语。

这就是我要找的:

http://alvarotrigo.com/fullPage/

https://github.com/alvarotrigo/fullPage.js

但谁知道,也许我会惊慌失措地回来,我必须安装它......:)