124

I have a textarea that is being dynamically reloaded as user input is being sent in. It refreshes itself every couple seconds. When the amount of text in this textarea exceeds the size of the textarea, a scroll bar appears. However the scroll bar isn't really usable because if you start scrolling down, a couple seconds later the textarea refreshes and brings the scroll bar right back up to the top. I want to set the scroll bar to by default show the bottom most text. Anyone have an idea of how to do so?

1

5 Answers 5

231

pretty simple, in vanilla javascript:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
2
  • 2
    If you just loaded the textarea in the same code block, this does not work. To make it work correctly, put this code in a separate function and then call it after you have loaded the new textarea value. Then it will work as desired.
    – blissweb
    Oct 25, 2020 at 1:00
  • 1
    It's an essential piece of information that assigning scrollTop to be scrollHeight has to happen each time after updating the text. If you don't do that, you won't get the desired effect.
    – uckelman
    Nov 21, 2021 at 14:05
56

You can use this with jQuery

$(document).ready(function(){
    var $textarea = $('#textarea_id');
    $textarea.scrollTop($textarea[0].scrollHeight);
});
3
  • not really familiar with jQuery. would i just put this into the same area as javascript or do i need to make a new <script> element and specify a new type?
    – moesef
    Feb 7, 2012 at 4:01
  • 1
    and add <script language='javascript' src='ajax.googleapis.com/ajax/libs/jquery/1.7.1/…> tags :)
    – Will P.
    Feb 7, 2012 at 4:55
  • 11
    Adding site wide dependency just to do something you can do in plain JS sound like a bad idea. Just because you can doesn't mean you should.
    – Mike Doe
    Sep 6, 2016 at 14:52
5

In your HTML ...

<textarea id="logTextArea" style="width:600px;height:200px;"></textarea>

In your Javascript ...

<script language="javascript">

    function loadLog(logValue) {
        logTa = document.getElementById("logTextArea")
        logTa.value = logValue;
        scrollLogToBottom()
    }

    function scrollLogToBottom() {
        logTa = document.getElementById("logTextArea")
        logTa.scrollTop = logTa.scrollHeight;
    }

    loadLog("This is my really long text block from a file ... ")

</script>

I have found that you need to put the code to set the scrollHeight into a separate function after loading the new value into the text area.

2

I had the same problem and found out that there is no attribute that can be set initially to get the right scrolling behaviour. However, once the text is updated in the textArea, immediately after in the same function you can set the focus() to textArea to make it scroll to bottom. You can then call focus() on some other input field as well to allow user to input in that field. This works like charm:

function myFunc() {
    var txtArea = document.getElementById("myTextarea");
    txtArea.value += "whatever"; // doesn't matter how it is updated
    txtArea.focus();
    var someOtherElem = document.getElementById("smallInputBox");
    someOtherElem.focus();
}
1
  • this is the best answer IMHO, thank you Feb 3 at 18:00
1

This is working for me and pretty straightforward (2022) So I wanted to share :

function scrollToBottom (t) {
  t.selectionStart = t.selectionEnd = t.value.length;
  t.blur()
  t.focus()
  // t.blur() // uncomment if you don't want a final focus
}

scrolltoBottom(myTextarea)

The trick is to place your cursor at the end of the textarea, quickly unfocus/focus back to update the view.


If you don't want to mess with the focus, use this function :

const scrollToBottom = t=>t.scrollTop=t.scrollHeight;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.