Article Categories

Selected Reading

How to set textarea scroll bar to bottom as a default using JavaScript/jQuery?

Javascript Web Development Front End Technology jQuery

In JavaScript, you can set a textarea's scroll bar to the bottom using the scrollTop property. This is useful when you want to automatically show the most recent content, such as in chat applications or log displays.

Syntax

element.scrollTop = element.scrollHeight;

Parameters

scrollHeight ? Returns the total height of the element's content, including content not visible due to overflow.

Method 1: Using Pure JavaScript

This approach uses the DOM's scrollTop property to position the scroll bar at the bottom of the textarea.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #textarea {
            height: 120px;
            width: 100%;
            padding: 10px;
            font-family: Arial, sans-serif;
            border: 2px solid #ddd;
            border-radius: 5px;
         }
         button {
            margin-top: 10px;
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <h2>Setting Textarea Scroll Bar to Bottom - JavaScript</h2>
      <textarea id="textarea">Line 1: Welcome to TutorialsPoint!
Line 2: This is a comprehensive learning platform.
Line 3: We offer tutorials on programming languages.
Line 4: Web development, databases, and much more.
Line 5: Join millions of learners worldwide.
Line 6: Start your learning journey today.
Line 7: Expert-crafted content for all skill levels.
Line 8: Interactive examples and hands-on practice.
Line 9: Build real-world projects and applications.
Line 10: This line should be visible at the bottom.</textarea>
      <br>
      <button onclick="scrollToBottom()">Scroll to Bottom</button>
      <button onclick="scrollToTop()">Scroll to Top</button>
      
      <script>
         function scrollToBottom() {
            const textarea = document.getElementById('textarea');
            textarea.scrollTop = textarea.scrollHeight;
         }
         
         function scrollToTop() {
            const textarea = document.getElementById('textarea');
            textarea.scrollTop = 0;
         }
         
         // Automatically scroll to bottom when page loads
         window.onload = function() {
            scrollToBottom();
         };
      </script>
   </body>
</html>

Method 2: Using jQuery

jQuery provides a cleaner syntax for the same functionality using the scrollTop() method.

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <style>
         #contentarea {
            height: 120px;
            width: 100%;
            padding: 10px;
            background-color: #f8f9fa;
            color: #333;
            font-family: 'Courier New', monospace;
            border: 2px solid #28a745;
            border-radius: 5px;
         }
         .btn-group {
            margin-top: 10px;
         }
         .btn-group button {
            margin-right: 10px;
            padding: 8px 16px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
         }
         .btn-group button:hover {
            background-color: #218838;
         }
      </style>
   </head>
   <body>
      <h2>Setting Textarea Scroll Bar to Bottom - jQuery</h2>
      <textarea id="contentarea">Log Entry 1: Application started successfully
Log Entry 2: Database connection established
Log Entry 3: User authentication module loaded
Log Entry 4: API endpoints registered
Log Entry 5: WebSocket server initialized
Log Entry 6: Cache system configured
Log Entry 7: Security middleware activated
Log Entry 8: Background tasks scheduled
Log Entry 9: Application ready to serve requests
Log Entry 10: This is the latest log entry</textarea>
      
      <div class="btn-group">
         <button id="scrollBottom">Scroll to Bottom</button>
         <button id="scrollTop">Scroll to Top</button>
         <button id="addContent">Add New Line</button>
      </div>
      
      <script>
         $(document).ready(function() {
            // Scroll to bottom on page load
            const $textarea = $('#contentarea');
            $textarea.scrollTop($textarea[0].scrollHeight);
            
            // Button click handlers
            $('#scrollBottom').click(function() {
               $textarea.scrollTop($textarea[0].scrollHeight);
            });
            
            $('#scrollTop').click(function() {
               $textarea.scrollTop(0);
            });
            
            $('#addContent').click(function() {
               const currentText = $textarea.val();
               const newLine = `\nLog Entry ${Date.now()}: New entry added`;
               $textarea.val(currentText + newLine);
               // Auto-scroll to bottom after adding content
               $textarea.scrollTop($textarea[0].scrollHeight);
            });
         });
      </script>
   </body>
</html>

Auto-scroll on Content Update

Here's a practical example that automatically scrolls to the bottom when new content is added:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #chatArea {
            height: 150px;
            width: 100%;
            padding: 10px;
            font-family: Arial, sans-serif;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: none;
         }
         .controls {
            margin-top: 10px;
         }
         input[type="text"] {
            width: 70%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
         }
         button {
            padding: 8px 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <h2>Chat-like Auto-scroll Example</h2>
      <textarea id="chatArea" readonly>Welcome to the chat!
User1: Hello everyone!
User2: Hey there!
User1: How's everyone doing?
User2: Great! Working on some JavaScript tutorials.
System: 5 users online
User3: Just joined the conversation
User1: Welcome User3!
User3: Thanks! Excited to be here.</textarea>
      
      <div class="controls">
         <input type="text" id="messageInput" placeholder="Type a message..." maxlength="100">
         <button onclick="sendMessage()">Send</button>
         <button onclick="simulateMessages()">Simulate Chat</button>
      </div>
      
      <script>
         let messageCounter = 1;
         
         function scrollToBottom() {
            const chatArea = document.getElementById('chatArea');
            chatArea.scrollTop = chatArea.scrollHeight;
         }
         
         function sendMessage() {
            const input = document.getElementById('messageInput');
            const chatArea = document.getElementById('chatArea');
            
            if (input.value.trim()) {
               const currentText = chatArea.value;
               const newMessage = `\nYou: ${input.value}`;
               chatArea.value = currentText + newMessage;
               input.value = '';
               scrollToBottom();
            }
         }
         
         function simulateMessages() {
            const chatArea = document.getElementById('chatArea');
            const messages = [
               'User4: This auto-scroll feature is really cool!',
               'User5: Agreed! Very useful for chat applications.',
               'System: 2 new users joined',
               'User6: Hello from the new user!',
               'User7: Perfect example of scrollTop usage!'
            ];
            
            messages.forEach((message, index) => {
               setTimeout(() => {
                  const currentText = chatArea.value;
                  chatArea.value = currentText + '
' + message;
                  scrollToBottom();
               }, (index + 1) * 1000);
            });
         }
         
         // Auto-scroll on page load
         window.onload = function() {
            scrollToBottom();
         };
         
         // Allow Enter key to send message
         document.getElementById('messageInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
               sendMessage();
            }
         });
      </script>
   </body>
</html>

Comparison

Method	Syntax	Dependencies	Best For
Pure JavaScript	`element.scrollTop = element.scrollHeight`	None	Lightweight applications
jQuery	`$element.scrollTop($element[0].scrollHeight)`	jQuery library	Projects already using jQuery

Common Use Cases

Chat Applications: Show latest messages automatically
Log Viewers: Display recent log entries
Console Outputs: Keep latest output visible
Comment Sections: Scroll to newest comments

Conclusion

Setting a textarea's scroll bar to the bottom is achieved by setting scrollTop equal to scrollHeight. Use pure JavaScript for lightweight solutions or jQuery for more complex applications. This technique is essential for creating user-friendly interfaces that automatically show the most recent content.

Gungi Mahesh

Updated on: 2026-03-15T23:19:00+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next