j查询平滑滚动到锚点

jQuery smooth scroll to anchor

本文关键字：滚动 查询 平滑      更新时间：2023-09-26

我使用 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 -->

j查询：

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

像这样的事情将逐步浏览.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;
    });
});
相关文章：