Question

大家好我在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
    }

});

或者你们有任何想法在点击链接时如何阻止scrolltop？感谢。

Answer 1

第一次滚动时，元素的偏移量会发生变化。快速入侵是在滚动到链接之前滚动到页面顶部。像这样：

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

});

Answer 2

如果我正确关注您，您可以使用HTML5中的data API来防止后续点击。说

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

Answer 3

如何检查scrollTop值？此外，您正在复制相同的代码。这不是一个很大的问题，但是如果你换一个而不是另一个会导致一些问题。

我会尝试：

$('.a').click(ScrollToPos("linkA"));
$('.b').click(ScrollToPos("linkB"));

function ScrollToPos(link) {
    // Current Scroll position of the window
    // might also use body here
    var currentTop = $(window).scrollTop();

    // The scrollTop value for the target link/paragraph
    var linkTop = $("#" + link).scrollTop();

    if (currentTop != linkTop) {
        $('body').animate({
            scrollTop: $("#" + link).offset().top;
        }, 500);
    }
}

尚未经过测试。只是一个想法，你应该试一试，看看你是否可以检查滚动位置。另外，我想你会想要检查范围或某个阈值。例如：用户单击linkA并将scrollTop设置为25.如果用户再次单击，则当前窗口scrollTop和段落顶部实际上是相同的。但是，如果用户滚动一个鼠标滚轮或箭头单击，该怎么办？窗口的scrollTop现在可能是26.这显然使得2个位置不匹配，但是用户有点在该部分。你应该想到一个门槛。就像窗口的scrollTop和段落的scrollTop在一个数字范围内一样，它们匹配。

单击链接时Jquery阻止ScrollTop

3 个答案: