Jquery preventing ScrollTop when a link is clicked

Question

Hi guys I'm having a problem in jquery scrollTop, my problem is after navigating to the id #linkA and click it all over again it adds a scrolls that is not needed. I want to prevent scrolling after the link is clicked. Let us assume that these three paragraphs has a large gap to each other.

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
    }

});

Or you guys have any idea how to block scrolltop when a link is clicked? Thanks.

Use this: http://stackoverflow.com/a/488073/961695 - if the funciton return true - paragraph is already in view and no scrolling needed — Yuriy Galanter, Dec 11 '13 at 19:10

Hayzeus · Answer 1 · 2013-12-11T19:17:03.047

0

When you scroll the first time, the offset of your elements changes. A quick hack would be to scroll to the top of the page before scrolling to your link. Something like this:

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

});

edited Dec 11 '13 at 19:17

answered Dec 11 '13 at 19:00

Hayzeus

63
7

Netbeans show error in `$('body').animate({0}, 0);` or `$('body').animate({scrollTop: 0}, 0);` ? am i right? Thanks. – user3012847 Dec 11 '13 at 19:11
oops, should be `$('body').animate({ scrollTop: 0 }, 0);` I'll edit my response – Hayzeus Dec 11 '13 at 19:16

score 0 · Answer 2 · answered Dec 11 '13 at 19:09

If I follow you correctly, you can use the data API in HTML5 to prevent subsequent clicks. Say

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

score 0 · Answer 3 · answered Dec 11 '13 at 19:14

How about possibly checking the scrollTop value? Also, you are replicating the same code. Not really a huge issue, but can cause you some issues if you change one and not the other.

I would try:

$('.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);
    }
}

This hasn't been tested. Just a figured you should give it a shot to see if you can check the scroll positions. Also, I would imagine you would want to check a range or some threshold. For example: The user clicks linkA and the scrollTop is set to 25. If the user clicks again, the current window scrollTop and the paragraphs top are actually the same. But what if the user scrolls one mouse wheel roll or arrow click. The window's scrollTop might now be 26. This obviously makes the 2 positions not match, however the user kinda is in that section. You should think of a threshold. Like if the scrollTop of the window and the scrollTop of the paragraph are within a range of a number then they match.

No problem. I think your best bet here is to check your positions someway. I am not a huge fan of hacks like resetting the window/scroll position then setting. This can cause additional issues down the line when the complexity of the page grows. You may wonder why some other action/function doesn't work as it should when in fact your hack is causing unusual behavior. — Tom, Dec 11 '13 at 19:30

Jquery preventing ScrollTop when a link is clicked

3 Answers3