jQuery平滑滚动到锚点答案

【问题标题】：jQuery smooth scroll to anchorjQuery平滑滚动到锚点
【发布时间】：2013-10-27 00:42:40
【问题描述】：

我使用 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（与我的网站具有相同的代码）并没有描述我已经完成的相同事情，因此没有可用的现场演示。如果你们需要，我会根据要求提供网址。 :-)

【问题讨论】：

会为 2 个锚点使用不同的类名 - .anchor-top 和 anchor-middle- 也许，有帮助吗？
@HenryFlorence 只要我能弄清楚每次delta 向南时如何迭代它。切换目标类是我遇到的麻烦......
可以使用jQuery的.next()方法来遍历anchors选择器，类似：jsfiddle.net/mSVZ2/3

标签： javascript jquery html css mousewheel

【解决方案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;
    });
});

【讨论】：