Question

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

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

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

jQuery平滑滚动到锚点

1 个答案: