极客教程如何使用JavaScript/jQuery将文本区域滚动条设置为底部作为默认值
给定一个包含元素的HTML文档，任务是使用jQuery将滚动条的位置设置为底部。
方法1
- 获取的 scrollHeight属性 。
- 使用jQuery的 scrollTop属性 来设置垂直滚动条的位置。
示例： 以下示例实现了上述方法。
<!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>
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(){
vartext = ('#t');
text.scrollTop($text[0].scrollHeight);
});
el_down.innerHTML =
"Scroll bar is moved to bottom.";
}
</script>
</body>
</html>
输出：
- 点击按钮之前：
- 点击按钮之后：
方法2
- 这个示例使用JavaScript完成相同的工作。
- 获取文本域的 scrollHeight属性 。
- 使用 scrollTop属性 设置垂直滚动条的位置。
示例： 这个示例实现了上述方法。
<!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>
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>
输出：
- 点击按钮之前：
- 点击按钮之后：
