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: