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?
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.
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
$('#link').css('position', 'fixed').focus().css('position', 'static') works in Firefox.
(Edit: You should not use this hack)