Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set textarea scroll bar to bottom as a default using JavaScript/jQuery?
The scrollTop property of HTML DOM elements is used to set or return the number of pixels of an elements content which is scrolled vertically. Suppose if the scroll bar is not generated by the content elements then the value of the scrollTop is zero.
The onclick event occurs only when a user clicks the elements and it is a purely JavaScript attribute. Whenever you click on the onclick event it does some actions like displaying a message or redirects the user another page. The onclick event must be used very less in the website, because it may create the confuse to the users. So, use these event very wisely.
In this article, we are going to learn how to set the textarea scroll bar to bottom as a default using the JavaScript/jQuery.
Syntax
The following is the syntax for the setting textarea scroll bar to bottom as a default using the JavaScript −
element.scrollTop = pixels
Parameter
Pixels − Used to specify the number of pixels of the elements content which is to be scrolled vertically.
Steps
Follow the below-given steps to set the textarea scroll bar to bottom as a default in JavaScript −
Step 1 − Let’s define the style for the textarea of the HTML Document which is going to set the textarea scroll bar to bottom as a default. For a textarea element, we defined the height, width, background-color, color, and text-align.
Step 2 − Under the body section, we defined the heading, button and script elements.
Step 3 − For the button element, the scrollBar() method is defined. Using this method location will be set the textarea scroll bar to bottom.
Step 4 − In scrollBar() method, the id is mentioned clearly for which method functionality should be performed.
Step 5 − The scrollTop property is the HTML DOM property which is used to set the scroll bar to textarea.
Step 6 − After clicking the button, the onClick event function is triggers and it set the scroll bar to bottom.
Example
In this example, we are going to set the textarea scroll bar to bottom as a default with the help of JavaScript.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
#textarea {
height: 100px;
width: 650px;
text-align:justify;
}
</style>
</head>
<body>
<h2>Setting textarea scroll bar to bottom as a default using JavaScript</h2>
<textarea id = "textarea">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</textarea>
<br><br>
<button onclick = "scrollBar()">
Press here
</button>
<script>
//function to set textarea scroll bar to bottom as a default using JavaScript
function scrollBar() {
var content = document.getElementById('textarea');
content.scrollTop = content.scrollHeight;
}
</script>
</body>
</html>
Using jQuery to Change the background color
Please follow the below-given steps to set the textarea scroll bar to bottom as a default using jQuery:
Step 1 − The source of jQuery is defined under the Script section of the header tag.
Step 2 − The button element is declared, which will be set the textarea scroll bar to bottom when we press it.
Step 3 − Inside the Script section, we defined the jQuery functionality for the scrollTop method.
Step 4 − You can set the scroll bar to bottom as a default for a selected element by using the jQuery selector along with the scrollTop method.
Step 5 − The example will set the textarea scroll bar to bottom as a default, and you can trigger the scroll bar change by using the click event handler.
Example
In this example, we are going to set the textarea scroll bar to bottom as a default using jQuery.
<html>
<head>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
#contentarea {
height: 100px;
width: 350px;
background: yellow;
color: blue;
text-align:justify;
}
</style>
</head>
<body>
<h2>Setting textarea scroll bar to bottom as a default using jquery</h2>
<textarea id = "contentarea">Tutorials Point through its collection of more than a thousand user-friendly tutorials, helping millions of students and professionals worldwide to master new technologies and grow in their career. After a successful journey of providing the best self-learning content at tutorialspoint.com, we created our subscription-based premium product called Tutorix to provide Simplified Learning through High Quality Visuals in the best personalized way for K-12 students, and aspirants of competitive exams like IIT/JEE and NEET.</textarea>
<br><br>
<button onclick = "contentscrollBar()">
Click here to Scroll
</button>
<script>
//function to set textarea scroll bar to bottom as a default using jQuery
function contentscrollBar() {
$(document).ready(function(){
var $content1 = $('#contentarea');
$content1.scrollTop($content1[0].scrollHeight);
});
}
</script>
</body>
</html>
Conclusion
In this article, we have demonstrated how to set the textarea scroll bar to bottom as a default along with examples. We have seen the two different examples here, in the first example, we set the textarea scroll bar to bottom after button is clicked using the JavaScript. In the second example, we set the scroll bar to bottom for the textarea once we click the button using the jQuery.
2K+ Views
