0

我使用 jQuery 扩展编写了一个相当简单的平滑滚动功能mousewheel，之前没有经验，$.mousewheel我遇到了问题。

基本上，一旦south delta被调用，我调用一个$.animate函数使用scrollTop到一个类.anchor

HTML（简化问题）：

<div id="static-section" class="anchor"></div> <!-- width: 100%; height: 258px -->
<div id="alt-section" class="anchor"></div> <!-- width: 100%; height: 346px -->

jQuery :

$(document).ready(function() {
    $("body").mousewheel(function(event, delta, deltaX, deltaY) {
        if( delta > 0 ) {
            console.log("North: " + delta);
        }

        else if( delta < 0 ) {
            console.log("South: " + delta);
            // ANIMATE TO ANCHOR FUNCTION
            $("html,body").animate({scrollTop: $(".anchor").offset().top}, "slow");
        }

        return false;
    });
});

所以：我的问题是它只动画到第一个实例.anchor（这将是#static-section）我试过做scrollTop: $(".anchor").next().top这显然不起作用，虽然没有出现错误，但它仍然只动画到第一个实例。我的第一个猜测是使用for循环，我试过了，但它没有用（也没有错误。）我以前从未真正使用过for循环，所以我不确定是否我所做的是正确的。任何帮助将非常感激！

注意：jsFiddle（与我的网站具有相同的代码）并没有描述我已经完成的相同的事情，所以没有可用的现场演示。如果你们需要，我会根据要求提供网址。:-)

4

1 回答 1

1

像这样的东西将逐步通过.anchor标签：

$(document).ready(function() {
    var $anchor = $('.anchor');
    $("body").mousewheel(function(event, delta, deltaX, deltaY) {
        if( delta > 0 ) {
            console.log("North: " + delta);
        }

        else if( delta < 0 ) {
            console.log("South: " + delta);
            // ANIMATE TO ANCHOR FUNCTION
            $("html,body").animate({scrollTop: $anchor.offset().top}, "slow");
            $anchor = $anchor.next('.anchor');
        }

        return false;
    });
});
于 2013-10-27T17:22:00.033 回答