javascript - jQuery-通过鼠标滚轮将视差页面平滑滚动到某些锚点

Question

我正在使用 Stellar.js 处理视差页面，我有一些视差窗格相互堆叠，如下所示：

当用户向下滚动页面并到达该窗格时，我希望每个窗格平滑滚动到顶部。我的意思是我希望滚动条足够聪明，可以将每个窗格对齐到屏幕顶部。我试过这个但没有奏效：

h = $(window).height();
t = $('#parallaxtop').offset().top + $('#parallaxtop').height();
if(t > h) {
    $(window).scrollTop(t - h);
}

这里是 JSFiddle：http: //jsfiddle.net/LDaUw/

Answer 1

我发现这个工作：

var pageH = $(window).innerHeight(); //grab window height
    $(window).scroll(function() {
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            var eTop = $('#parallaxtop').offset().top; //get the offset top of the element
            var myOffset = eTop - $(window).scrollTop(); //determine the offset from window
            if (myOffset > -100 && myOffset < pageH/2) { //if the offset is less than the half of page scroll to the panel
                    $('#parallaxtop').ScrollTo({ //ScrollTo JQuery plugin
                    });
            }
        }, 250)); //this will be calculated 250ms after finishing every scroll
    });

我使用ScrollTo JQuery 插件进行平滑滚动。