How to scroll to the bottom of a textarea using jQuery

Today I came across a situation where in textarea control, text was appended from code behind (.NET code) on button click. But the actual concern was that appended text is not visible to the end user as textbox area shows text from the top.

So I looked into jQuery to find solution of it and there you go. jQuery provides a method called "scrollTop", which allows you to set the scroll bar value within any element. Below jQuery code set the scrollTop value to the element's scrollHeight.

scrollHeight is Height of the scroll view of an element; it includes the element padding but not its margin.

$(document).ready(function(){
   $('#txtMultiLine').scrollTop($('#txtMultiLine')[0].scrollHeight);
});
<textarea rows="20" cols="100" id="txtMultiLine">

And yes, one strange thing is "('#txtMultiLine').scrollHeight" doesn't work. I wonder, why? But "('#txtMultiLine')[0].scrollHeight" works.

See live Demo and Code

Feel free to contact me for any help related to jQuery. I will gladly help you.



Responsive Menu
Add more content here...