Javascript 使用CSS和jquery应用滚动效果

我正在寻找一种特殊的滚动效果，例如在本页上： 滚动时，页面不会跟随滚动，而是跟随动画。我不知道怎么做。我尝试使用jquery和scroll事件，它在chrome上工作，但在safari上不工作，而且肯定不如示例中的平滑。 我想我必须考虑到卷轴的“速度”，但不知道如何做到平滑

知道怎么做吗？（我宁愿有一个解释而不是一个插件，但每个答案都是最受欢迎的）。

---

谢谢

这个概念类似于任何jquery滑块（但差别不大）

将您的站点拆分为100%和100%高度的独立页面（独立div）（基本上一个

div

必须覆盖查看窗口）

使用

CSS

隐藏滚动条； 使用下面的代码

body{
    overflow:hidden;
}

然后将函数绑定到窗口滚动事件

$(window).scroll(function(){

})

检测滚动条。如果滚动是

向下

则设置动画到下一页，否则如果滚动是

向上

则设置动画到上一页。 使用以下代码测试上下滚动

var lastScrollTop = 0;
$(window).scroll(function(event){
    var st = $(this).scrollTop();
    if (st > lastScrollTop){
        // downscroll code
    } else {
        // upscroll code
    }
    lastScrollTop = st;
});

使用下面的脚本为页面设置动画

$('html,body').animate({scrollTop : $('div id').offset().top})

因此，它将类似于

var lastScrollTop = 0;
$(window).scroll(function(event){
    var st = $(this).scrollTop();
    if (st > lastScrollTop){
        $('html,body').animate({scrollTop : $('next div id').offset().top})
    } else {
        $('html,body').animate({scrollTop : $('prev div id').offset().top})
    }
    lastScrollTop = st;
});

---

谢谢我使用相同的东西，但我希望用户在启动动画之前滚动更多。为此，我使用了一个计数器（例如50），在每个滚动事件中我都使用50--。当计数器==0时，我启动动画。问题是它在chrome和firefox上很好，但在safari上很难看……不知道你所说的“非常难看”是什么意思。你的意思是低帧速率？在计数器=50之前，我强制浏览器不要滚动（使用scrollTop（0）），但safari似乎会先滚动一点，然后在每次滚动事件时返回到0。对眼睛不好