How can I stop the browser viewport moving to the top of the page when the user clicks on a jQueryUI radio button?

Question

I have got some radio buttons setup like this:

<div id="typeRadios">
    <input id="note_notetype_note1" name="note[notetype]" type="radio" value="note1" /><label for="note_notetype_note1">note1</label>
    <input id="note_notetype_note2" name="note[notetype]" type="radio" value="note2" /><label for="note_notetype_note2">note2</label>
</div>

That I turn into jQueryUI buttons like this:

$("#typeRadios").buttonset();

This is the resulting HTML:

<input type="radio" value="note1" name="note[notetype]" id="note_notetype_note1" class="ui-helper-hidden-accessible">
<label for="note_notetype_note1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note1</span></label>
<input type="radio" value="note2" name="note[notetype]" id="note_notetype_note2" class="ui-helper-hidden-accessible">
<label for="note_notetype_note2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note2</span></label>

The buttons work, but whenever I click one, the browser view-port gets returned to the top of the page, the same way it happens when you click on a <a href="#">link</a> link.

I am using jQuery 1.4.2 and jQueryUI 1.8.7. How can I prevent this behaviour? Thanks for reading.

EDIT: The <a href="#">link</a> part was missing.

Answer 1

I encountered this problem recently and I have actually found a solution which might help you depending on your CSS.

Basically if you are hiding your radio buttons off the page using something like:

input[type="radio"] {
  left : -10000px;
  position: absolute;
  top : -10000px;
}

Or something similar it is the top : -10000px ; that is the issue.

That is, when the radio button is inevitably focused by the label click, the page is trying to bring it into view by scrolling the browser viewport to the radio button. Since the minimum scrollTop value for the browser is 0 it scrolls to the top.

If you just remove the rule top : -10000px ; it will fix the issue.

Hope this helps.

p.s. the reason why preventDefault and stopPropagation won't work in this instance as mentioned as a solution in other comments is that they do not stop the default behaviour of the browser to focusing of the form field when the label is clicked.

Answer 2

I've tried to recreate the issue, but failed. I've checked this in FireFox 3.6.13, Google chrome 8.0 and Internet Explorer 8.

Can you give some more details to recreate the issue or may be test html page?

Do you have a click event for the radio buttons. If you have one on your event handler you can stop the propagation of the event and try once.

function clickhandler(ev){
    ev.stopPropagation();
    ev.preventDefault();
    //Your code here
}

But whatever code is given here does not suggest anything that can cause this behavior. If you have a test page please update the post with that.

Answer 3

Instead of using href="#", use href="#add" or any other relevant text. This will solve the jumpting to the top of the page.