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
    });
});