Question

我有一个链接，当点击时，向下滚动到一个元素。

每次测试点击时，页面不一致都可能会在滚动之前闪烁。

链接：

<a id="continue_scroll" href="#welcome">Continue / Scroll</span></a>

要滚动的元素：

<h2 id="welcome">WELCOME</h2>

jQuery：

jQuery(function($){     
    $("#continue_scroll").click(function() {
        $('html, body').animate({
            scrollTop: $("#welcome").offset().top
        }, 2000);
    });   
});

行为：当我刷新页面并连续点击继续链接或间歇性地点击之前/之后的其他地方时发生。行为不一致。

任何人都可以确定造成这种情况的原因以及相应的解决方案可能是什么？

Answer 1

您需要阻止锚点的默认操作（即立即跳转到href＆lt; ed元素）

jQuery(function($){     
    $("#continue_scroll").click(function(e) { <!-- add a reference to the event here -->
        e.preventDefault(); <!-- prevent the default action of the event -->
        $('html, body').animate({
            scrollTop: $("#welcome").offset().top
        }, 2000);
    });   
});

你看到的flash是在jQuery接管之前立即滚动到#welcome的页面，并用动画再次滚动到元素

页面在基本jQuery滚动到元素时闪烁

1 个答案: