javascript - jQuery 平滑滚动到 anchor

Question

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

基本上，一旦 south delta 被调用，我就使用 scrollTop 调用一个 $.animate 函数到一个类 .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(与我的网站具有相同的代码)并没有描述我已经完成的相同的事情，所以没有可用的现场演示。如果大家需要，我会根据要求提供网址。 :-)

Answer 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;
    });
});