Scrollbar getting stuck with jQuery show & hide

Question

I'm using jQuery to show and hide various divs to paginate content. However, immediately after selecting an option that shows or hides the divs (for example, page 1, 2 or 3) and scrolls erratically up and down rather than let me scroll down the page. I have no idea at all what could be doing this, and having searched Stack Overflow and Google it doesn't appear to be a problem that anyone else has faced. Does anyone have advice on what could be causing this problem and how to rectify it?

score 1 · Answer 1 · answered Aug 14 '12 at 10:22

1

Try this :

$(".datepicker").focus(function () {
    parent = $(this);


    $("#ui-datepicker-div").position({
        my: 'left center',
        at: 'right center',
        of: parent
    });
});

answered Aug 14 '12 at 10:22

Korplex

164
8

score 1 · Accepted Answer · edited May 23 '17 at 11:43

Do you mean that you do not want the page to jump to the top? If so, it is happening because your <a> tags have href="#". This is normal behaviour for browsers and you can test this on any site. Just scroll down the page, add a hash to the end of the URL press Enter and the browser will move to the top of the page.

You are using jQuery to bind a function to the click event on the <a> tags which will first execute the function and then continue to follow the href. To prevent this continuation you can either return false; from the function or use in-built jQuery functions preventDefault() and stopPropagation() to prevent the default behaviour and stop the event propagating - see event.preventDefault() vs. return false

So change your code to:

$("div.pages a.page1").click(function() {
    $("div.pd-item#tethco, div.pd-item#novi, div.pd-item#inna").show();
    $("div.pd-item:not(#tethco, #novi, #inna)").hide();
    return false;
});

And also do the same for the a.page2 and a.page3 bound functions and the page will no longer jump.

Thanks very much, that did it. There was one other factor causing the problem - the smooth scrolling function I'm using was detecting the href="#" and trying to animate the links; I fixed it by adding :not([href$=#]) to the selector. — daysrunaway, Apr 24 '11 at 17:50

Scrollbar getting stuck with jQuery show & hide

2 Answers2