Scrollbar getting stuck with jQuery show & hide

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 开发者_JAVA百科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?

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.

Try this :

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


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