jQuery focus without scroll

Question

How can I focus to a HTML element (ex. "a") and do not change the current scroll settings.

For ex. if I use:

$('#link').focus();

and this link is not visible in the screen (ex. is bellow the visible area) the browser scrolls down to show the element. How can I set the focus without scrollbar movement? I need to stay the scrollbar in the original place.

I have tried this, but it produces some screen flickering, and it is a hack, not an elegant solution:

var st=$(document).scrollTop();
$('#link').focus();
$(document).scrollTop(st);

Can somebody help me, please?

Answer 1

Try this:

$.fn.focusWithoutScrolling = function(){
  var x = window.scrollX, y = window.scrollY;
  this.focus();
  window.scrollTo(x, y);
  return this; //chainability

};

and then

$('#link').focusWithoutScrolling();

Edit:

It's been reported that this doesn't work in IE10. The probable solution would be to use:

var x = $(document).scrollLeft(), y = $(document).scrollTop();

but I haven't tested it.