How to set Textarea Scroll Bar to Bottom as a Default using JavaScript/jQuery?

Last Updated : 12 Jul, 2025

Given an HTML document containing <textarea> element and the task is to set the position of scrollbar to bottom of <textarea> with the help of jQuery.

Below are the approaches to set the textarea scrollbar to the bottom:

Table of Content

Using jQuery
Using JavaScript

Approach 1: Using jQuery

Get the scrollHeight property of the textarea.
Use scrollTop property to set the position of the vertical scrollbar using jQuery.

Example: This example implements the above approach.

html

<!DOCTYPE HTML> 
<html> 

<head> 
    <title> 
        JavaScript | Set textarea scroll
        bar to bottom as a default.
    </title>
    
    <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    
    <style>
        #t {
            height: 100px;
            width: 300px;
            background: green;
            color: white;
            text-align:justify;
        }
    </style>
</head> 

<body style = "text-align:center;"> 
    
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1>
    
    <p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;">
    </p>
    
    <textarea id = "t">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well 
        explained computer science and
        programming articles, quizzes etc. 
        It also contains the practice section
        which is helpful for practicing the
        data structure and algorithms
        questions. GeeksforGeeks provides
        placement course, DSA class, Machine
        learning class and other online and
        offline courses which will help in
        placement and also growing the
        knowledge.
    </textarea>
    
    <br>
    
    <button onclick = "gfg_Run()"> 
        click here
    </button>
    
    <p id = "GFG_DOWN" style = "color:green;
        font-size: 20px; font-weight: bold;">
    </p>
    
    <script>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        
        el_up.innerHTML = "Click on the button to set "
                + "the scroll bar to bottom";
        
        function gfg_Run() {
            $(document).ready(function(){
                let $text = $('#t');
                $text.scrollTop($text[0].scrollHeight);
            });
            
            el_down.innerHTML = 
                "Scroll bar is moved to bottom.";
        }         
    </script> 
</body> 

</html>

Output:

Approach 2: Using JavaScript

This example is doing the same job by JavaScript.
Get the scrollHeight property of the textarea.
Use scrollTop property to set the position of vertical scrollbar.

Example: This example implements the above approach.

html

<!DOCTYPE HTML> 
<html> 

<head> 
    <title> 
        JavaScript | Set textarea scroll bar to bottom as a default.
    </title>
    
    <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    
    <style>
        #t {
            height: 100px;
            width: 300px;
            background: green;
            color: white;
            text-align:justify;
        }
    </style>
</head> 

<body style = "text-align:center;"> 
    
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1>
    
    <p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;">
    </p>
    
    <textarea id = "t">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well 
        explained computer science and
        programming articles, quizzes etc. 
        It also contains the practice section
        which is helpful for practicing the
        data structure and algorithms
        questions. GeeksforGeeks provides
        placement course, DSA class, Machine
        learning class and other online and
        offline courses which will help in
        placement and also growing the
        knowledge.
    </textarea>
    
    <br>
    
    <button onclick = "gfg_Run()"> 
        click here
    </button>
    
    <p id = "GFG_DOWN" style = "color:green;
        font-size: 20px; font-weight: bold;">
    </p>
    
    <script>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        
        el_up.innerHTML = "Click on the button to set"
                + "the scroll bar to bottom";
        
        function gfg_Run() {
            let text = document.getElementById('t');
            text.scrollTop = text.scrollHeight;
            el_down.innerHTML = "Scroll bar is moved to bottom.";
        }         
    </script> 
</body> 

</html>

Output:

How to create auto-resize textarea using JavaScript/jQuery ?

PranchalKatiyar

Improve

Article Tags :

How to set Textarea Scroll Bar to Bottom as a Default using JavaScript/jQuery?

Approach 1: Using jQuery

Approach 2: Using JavaScript

Similar Reads

Thank You!

What kind of Experience do you want to share?