Question

I see a strange issue where the ScrollTo plugin scrolls twice the expected distance, but only when you click on a radio button or checkbox label.

I removed the plugin and replaced it with this…

$("html, body").animate({ scrollTop: '+=50' }, 650);

Yet the issue remained. So then I tried adding an animation stop with no luck…

$("html, body").stop(true, true).animate({ scrollTop: '+=50' }, 650);

Then I created a very basic jsFiddle of the issue and I’m now convinced this is a jQuery Core bug. Tested in all jQuery versions back as far as jsFiddle allows. So far, it’s the same in Safari, Firefox and IE8.

If there’s a <label> element next to a radio button or checkbox and its id is used as the for attribute within the <label>, clicking the <label> will select its corresponding radio button or checkbox. (This is supposed to work like that.)

<input id="type-0" type="radio" name="name" value="" />
<label for="type-0" title="">Click this Label and Radio is selected.</label>

The issue here is that jQuery scrollTop() doubles the calculated position but only when you click on a <label> which selects a radio button or checkbox. It scrolls the proper distance when you click anything else including the radio button or checkbox itself.

http://jsfiddle.net/sparky672/sZAkJ/

As you can see, clicking the label linked to its input element causes a double scroll.

Some other observations:

In my page, it appeared as if the scroll starts and stops twice. That’s why I added the .stop(true, true) to my animation. However that has no effect towards stopping this problem.

I cannot avoid using the labels to select my input elements since I have another feature that depends upon this. (Example: http://jsfiddle.net/sparky672/CgMX8/)

I’m looking for…

1) An explanation for this. If not, perhaps it’s just a (new?) jQuery Core bug. I was unable to find any other mention of this quirk after searching Google. Nothing in the jQuery bug tracker either.

2) A workaround for this so I can click on input labels and not have the scroll doubled. I’d like to achieve the scroll effect when anything within the container is clicked including the radio buttons & labels. I’m thinking that the selectors can be refined so the scroll can be cut in half when a label is clicked but still work normally when anything else is clicked. (That may not work very well either since it still appears as if the animation is fired twice.)

Answer 1

1) An explanation for this. If not, perhaps it’s just a (new?) jQuery Core bug. I was unable to find any other mention of this quirk after searching Google. Nothing in the jQuery bug tracker either.

This isn’t an issue with scrollTop or animation. It has to do with the click event being handled twice on #wrapper when the label is clicked.

When the label is clicked, a click event bubbles up to #wrapper. However, clicking the label also triggers a click event on the input it’s tied to, which also bubbles up to #wrapper.

For proof of this, check out this example: http://jsfiddle.net/g9gAT/. Each time the click event is handled, I’m appending the tag name of the target element. When you click a label it’s appends label followed by input.

2) A workaround for this so I can click on input labels and not have the scroll doubled.

$("#wrapper label").click(function (e) {
    e.stopPropagation();
});

Update Example: http://jsfiddle.net/r3fX4/