Got a Div being refreshed every 5 seconds. The div has scrolling set to scroll so that user can scroll. I know  how I can keep the scroll position after the div is refreshed ?

$("#bottom").on("scroll", function()
{
    $("#bottomv").html($("#bottom")[0].scrollTop);
});
 
$(function()
{
  $("#bottom")[0].scrollTop = $("#bottom")[0].scrollHeight - $("#bottom").height();
});

Scenario 1) There is a textArea on this page, I want it that when a user clicks on the textbox, the

scroll bar should automatically go to bottom of the div.

Scenario 2) When the user submit the form, ajax  $(#id).laod('page/ #id') is called, but the scroll bar maintains its position hiding the new message until the user scrolls down again.. 

Scenario 3)  If Scenarios 1 and 2 is successful, it should not conflict with when a user is scrolling through the messages. (if a user is scrolling through messages,  ajax  $(#id).load('page/ #id') should not affect the scroll position )

Bottom Line: I'm relatively new to Front-End design, so Please, your contribution should be something I would understand easily or close to easy