Prevent label page scrolling to input

html, javascript, jquery

Solution

$('label[for]').on('click', function (e) {
    var target = window[this.htmlFor];
    target.checked = !target.checked;
    e.preventDefault();
});

Problem

Anybody know of a way to prevent the page jumping to an input when is is changed? Particularly if it's changed with a label button from elsewhere on the page. This problem affects IE, Chrome Canary, FireFox, and probably some others, in-fact the only browser it doesn't seem to affect is Chrome v28. You can see the problem here: http://jsfiddle.net/FgaWM/3/ Normally this would be a useful feature, but in my case it is quite annoying, I need a way to prevent it / override it. I've tried forcing the scroll position with JQuery: ``` var labelPos = $(window).scrollTop(); $(window).scrollTop(labelPos); ``` This solution is... buggy at best, causing momentary page flicker. Anyone have a better way? Edit: I figured-out a solution :P ``` $('label').click(function(e) { e.preventDefault(); var For = $(this).attr('for'); $('#' + For).trigger('click'); }); ```

Original source