0

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

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 ......对吗？

4

2 回答 2

0

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

相关代码：

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

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

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

演示

于 2012-06-20T17:34:22.493 回答
0

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

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

于 2012-06-20T21:29:27.540 回答