Question

我正努力实现以下目标：

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

这是我到目前为止的脚本。如你所见（我希望）。当#plus距离页面顶部250到20像素之间时，我想运行将#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

如果你正在推行自己的实现，你将需要使用去抖功能在给定的时间间隔内触发一次动作。

http://underscorejs.org/#debounce

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

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

 $(window).scroll(fn);

如果你想要一个jquery库来处理滚动事件，那么路点非常好 http://imakewebthings.com/jquery-waypoints/

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

1 个答案: