How To Prevent Textarea From Scrolling To The Top When Its Value Changed?

Consider the following example: (Live demo here) HTML:

Click Here

CSS: textarea { height: 80px; width:

Solution 1:

You can save the scrollTop offset, set the value, and reset the scrollTop to the old offset:

var $textarea = ...;
var top = $textarea.scrollTop();
$textarea.val('foo');
$textarea.scrollTop(top);

Try it here: http://jsfiddle.net/QGJeE/7/

Solution 2:

Another solution(harder to imply as there is no unique cross-browser-way):

Instead of changing the value of the textarea create a textRange of the textarea's content and modify the ranges text.