Question

I’ve got a code like this:

<a href="javascript://" onclick="$('#newMsgTxt').focus();">New message</a>
<div style="min-height: 1300px;"></div>
<textarea id="newMsgTxt"></textarea>
<div style="min-height: 500px;"></div>

And here is the problem:
After I click the link, in different browsers the page scroll to a different position.

Example of textarea position on the screen after the click:

Chrome: center
FF: bottom
Opera: top

How can I make all browsers work like Chrome do?

Answer 1

$('a').click(function(e){
    e.preventDefault();
    var o = $('#newMsgTxt').focus().offset().top, $w = $(window);
    $w.scrollTop(o - ($w.height() / 2));
});

http://jsfiddle.net/2BHRw/