javascript：用户滚动时动画滚动答案

【问题标题】：javascript: animate scrolling when user scrollsjavascript：用户滚动时动画滚动
【发布时间】：2012-06-20 17:18:47
【问题描述】：

当用户滚动时，我想动画页面滚动到页面的不同部分。所以我写了这段代码：

var $window = $(window);    
var sectionHeight = $window.height();
var animating = false;
var dir;
// initialize page position (0)
var pagePos = $(window).scrollTop();

$(window).scroll(function() {
    // current page position    
    var st = $(this).scrollTop();

    // whether to animate up or down        
    dir = ((st > pagePos) ? '+=' : '-=');

    // animate 
    if (animating == false) {
        animating = true;
        $('html, body').stop().animate({scrollTop: dir+sectionHeight},500, function() {

            pagePos = $(window).scrollTop();    
            animating = false;
        }); 
    }
});

问题是，在我的初始动画关闭后，我得到了一个链接动画，它将页面动画返回到顶部。我不知道为什么，因为除非“动画”设置为假，否则它不应该动画。仅当动画完成时才将其设置回 false ......对吗？

【问题讨论】：

有趣的是，在滚动功能中，我添加了一行来显示固定 div 中的“动画”状态。它在滚动时变为真，然后闪烁假，但最终保持为真......

标签： javascript jquery

【解决方案1】：

一个潜在的解决方法，虽然我确信有人可以提出更好的解决方案，但在它滚动后将其禁用一段时间。

相关代码：

var ct = new Date().getTime();

if (animating == false && new Date().getTime() > ct + 10)

这只会在至少 11 毫秒后才允许动画发生。似乎适用于低至 2 的值。您并没有真正注意到滚动有任何延迟，但我也不认为这是一个理想的解决方案。

DEMO

【讨论】：

【解决方案2】：

我能够让它工作，我仍然不知道为什么它在编码时不起作用，但这是对我有用的解决方案 - 我受到 @sachleen 的回答的启发。谢谢 sachleen。

我将滚动动画移动到一个单独的函数中，然后在对动画函数的回调中，我使用了一个与动画持续时间相同的 setTimeout 来调用另一个函数，该函数只是将“动画”布尔值更改回 false。

【讨论】：