javascript - scrollTop 在滚动前回到顶部

Question

我有一个函数可以将页面滚动到给定的偏移量。我正在使用视差效果，所以我所有的元素(和页面，或“幻灯片”)都根据滚动条的位置定位。

我的小问题是，当我单击指向另一张幻灯片的链接时，它会将页面滚动到所需的偏移量，但会触发绑定(bind)的事件。这应该可以，以保持流畅的效果。但是有一个小故障，似乎 scrollTop 函数在正确执行之前回到顶部一毫秒。所以看起来每次我在滚动到正确位置之前单击链接时都会显示另一个页面一毫秒。

这是我的代码:

    for(var i=1;i<8;i++)
    {
        (function(slideNum) {
            var tempName = 'slide'+slideNum;
            //console.log(defaultPositions["slide"+i].top);
            $('a.slide'+i).bind('click', function() {
                $.scrollTo((defaultPositions[tempName].top/slidesScrollSpeed)+1+'px', 800);
            });
        })(i);
    }

我知道在这段代码中可能很难找到问题，但我只能找到与此相关的问题。你知道怎么回事吗？

谢谢!

PS:scrollTo 是一个 jQuery 插件，但与 scrollTop 有同样的问题...

Answer 1

您需要阻止链接的默认操作。我假设您的链接上有类似 href="#" 的内容？将您的点击绑定(bind)更改为:

$('a.slide'+slideNum).bind('click', function(event) {
    event.preventDefault();
    $.scrollTo((defaultPositions[tempName].top/slidesScrollSpeed)+1+'px', 800);
});

编辑:我注意到您将 i 作为 slideNum 传递，但随后使用 i，因此我更改了我的代码以使用传入的值存储在 slideNum