使页面中得滚动条始终在底部

<div id="content"  style="width:100%;height:100px;border:1px solid #ccc;overflow-y: auto;margin-top:20px;margin-bottom:20px;">
        <!--内容显示框-->
</div>
<div>
    <input type="text" value="" id="in" style="width:100%;height:30px;">
</div>
<div style="text-align: center;margin-top:20px;">
    <input type="button" id="btn" value="提交" style="width:50%;height:30px;">
</div>

<script src="jquery-1.8.3.min.js" ></script>
<script>
    
        $("#btn").click(function(){

              var txt = $("#in").val(); //获取输入框中得内容
              $("#content").append(txt+"<br/>"); //将内容显示在页面
              $("#in").val(""); //将输入框中得内容清空
              add();
       
        }) 
        //使得滚动条一直在底部
        function add()
        {
           var div = document.getElementById("content");
           div.scrollTop = div.scrollHeight;
        }
</script>