Textarea automatisch nach unten scrollen

Question

Ich versuche, meinen Textbereich nach unten zu scrollen, wenn neuer Text eingefügt wird. Aber ich kann es einfach nicht zur Arbeit bringen.

HTML

<textarea id="txt-area" readonly rows="21" cols="48"></textarea> 
<button class="buttons" value="1">1</button> 
<button class="buttons" value="2">2</button> 
<button class="buttons" value="3">3</button> 
<button class="buttons" value="4">4</button> 
<input type="button" class="buttons" value="Test"> 
<input type="button" class="Backspace" value="DEL"> 

JavaScript

var values = []; 

$(document).ready(function() { 
    $(".buttons").click(function() { 
     var cntrl = $(this).html(); 
     if ($(this)[0].nodeName == "INPUT") 
     { 
       cntrl = $(this).attr("value"); 
     } 

     $("#txt-area").val(function (_, val){ 
      return val + cntrl 
     }); 
     values.push($(this).val()); 
     $("#txt-area").val(values.join("\n")); 
    }); 
      $('.Backspace').on('click', function() { 
      values.pop(); 
      $('#txt-area').val(values.join("\n")); 
     }); 
}); 

$(document).ready(function(){ 
    $(".buttons").click(function(){ 
     $('#txt-area').scrollTop($('#txt-area').scrollHeight);  
    }); 

}); 

Mein Code ist auch in diesem jsFiddle

Answer 1

Sie benötigen

$('#txt-area').scrollTop($('#txt-area').scrollHeight);  

zu

$('#txt-area').scrollTop($('#txt-area')[0].scrollHeight);  

http://jsfiddle.net/cPYCV/48/ Siehe

Answer 2

Fügen Sie diese auf Ihrem JavaScript

window.setInterval(function() { 
    var elem = document.getElementById('txt-area'); 
    elem.scrollTop = elem.scrollHeight; 
}, 1000);