How to set textarea scroll bar to bottom as a default using JavaScript/jQuery ?
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.
Approach 1:
- Get the scrollHeight property of the textarea.
- Use scrollTop property to set the position of vertical scrollbar using jQuery.
Example: This example implements the above approach.
<!DOCTYPE HTML> <html> <head> <title> JavaScript | Set textarea scroll bar to bottom as a default. </title> <script src = </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> var el_up = document.getElementById("GFG_UP"); var 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(){ var $text = $('#t'); $text.scrollTop($text[0].scrollHeight); }); el_down.innerHTML = "Scroll bar is moved to bottom."; } </script> </body> </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Approach 2:
- 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.
<!DOCTYPE HTML> <html> <head> <title> JavaScript | Set textarea scroll bar to bottom as a default. </title> <script src = </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> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Click on the button to set" + "the scroll bar to bottom"; function gfg_Run() { var text = document.getElementById('t'); text.scrollTop = text.scrollHeight; el_down.innerHTML = "Scroll bar is moved to bottom."; } </script> </body> </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Please Login to comment...