Make the scroll bar in the page always at the bottom

<DivID= "Content"style= "width:100%;height:100px;border:1px solid #ccc; overflow-y: auto;margin-top:20px;margin-bottom:20px;">        <!--Content Display Box -</Div><Div>    <inputtype= "text"value=""ID= "in"style= "width:100%;height:30px;"></Div><Divstyle= "text-align:center;margin-top:20px;">    <inputtype= "button"ID= "BTN"value= "Submit"style= "width:50%;height:30px;"></Div>

<script src= "Jquery-1.8.3.min.js" ></script><script>            $("#btn"). Click (function(){              varTXT = $ ("#in"). Val ();//get the contents of the input box$ ("#content"). Append (txt+ "<br/>");//Show content on page$ ("#in"). Val ("");//empty the contents of the input boxAdd (); })         //so that the scroll bar is always at the bottom        functionAdd () {vardiv = document.getElementById ("Content"); Div.scrolltop=Div.scrollheight; }</script>

Make the scroll bar in the page always at the bottom