jquery - 靠近窗口顶部时滚动到元素顶部

Question

我正在努力实现以下目标：

我有一个 div，当它几乎位于页面顶部时，我想自动滚动到该 div 的顶部。

这是我到目前为止的脚本。如您所见（我希望）。当#plus 距离页面顶部 250 到 20 px 时，我想运行将 #editions 定位在页面顶部的动画。然而，动画被执行了很多次，并且一直在继续。我认为它会为 250 到 20 之间的每个值触发，所以基本上是 230 次。我不确定我是否以正确的方式解决这个问题。

// Scroll to Editions //
function scrollEditions(){
    $('html, body').animate({
    scrollTop: $("#plus").offset().top
}, 1200, 'easeOutQuint').delay(200).animate({
    scrollTop: $("#editions").offset().
    }, 800, 'easeOutQuint');
};

// Scrolling check //
function showHideTitles(){
    // Distance of elements frop top //
    var Ptop2 = Math.round($('#plus').offset().top - $(window).scrollTop());        // PLUS from top

    // Auto scrolling //
    if (Ptop2 <= 240 && Ptop2 >= 20){
        scrollEditions();
    }
};

$(window).scroll(function(){
    showHideTitles()
});

Answer 1

如果您正在滚动自己的实现，您将需要使用 debounce 函数在给定的时间间隔内触发一次您的操作。

http://underscorejs.org/#debounce

http://jsfiddle.net/puleos/j67eG/40/

 var fn = _.debounce(showHideTitles, 300);

 $(window).scroll(fn);

如果你想要一个 jquery 库来处理滚动事件航点是非常好的。
http://imakewebthings.com/jquery-waypoints/