嗨,大家好,我在jquery scrollTop中遇到问题,我的问题是导航到ID #linkA之后,再次单击它,它添加了不需要的滚动条。我想防止在单击链接后滚动。让我们假设这三个段落之间有很大的差距。

HTML:

    <ul>
    <li ><a href="#linkA"> Link A </a></li>
    <li ><a href="#linkB"> Link B </a></li>
    </ul>

    <p id="#linkA">Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit
anim id est laborum.</p>

    <p id="#linkB">Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit
anim id est laborum.</p>


jQuery:

$(document).ready(function() {

$('.a').click(function() {
    $('body').animate({
        scrollTop: $("#linkA").offset().top
    }, 500);
    return false;

});

$('.b').click(function() {
    $('body').animate({
        scrollTop: $("#linkB").offset().top
    }, 500);
    return false;
});
});

$(window).scroll(function() {
    var windowTop = $(document).scrollTop();

    if (windowTop > 0 && windowTop <= 200) {
        //i got some parallaxing code here
    }

});


还是你们有什么主意,当单击链接时如何阻止滚动顶部?谢谢。

最佳答案

如果我正确地遵循了您的说明,则可以使用HTML5中的data API来防止后续点击。说

$('.a').click(function() {
    if (!$(this).data('clicked')) {
        $('body').animate({
            scrollTop: $("#linkA").offset().top
        }, 500);
    } else {
        $(this).data('clicked', true);
    }
    return false;
});

10-04 22:24
查看更多