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.

Answer 2

Use {preventScroll: true} option on the focus method. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

If using jQuery try $('#el')[0].focus({preventScroll: true}) or iterate over each in your collection