How to Scroll to Bottom of Div in JavaScript ?
Last Updated :
04 Mar, 2024
Improve
Scrolling to the bottom of a div is a common task in web development, especially when dealing with chat applications, message boards, or any content where new information is frequently added at the bottom.
There are several approaches to scrolling to the bottom of the div in JavaScript which are as follows:
Table of Content
Using scrollTop Property
The scrollTop property of a div element represents the number of pixels the content of the div is scrolled from its top. By setting this property to the div's scrollHeight, we can scroll to the bottom.
Syntax:
// Get the div element
let divElement = document.getElementById('divId');
// Scroll to the bottom of the div
divElement.scrollTop = divElement.scrollHeight;
Example: To demonstrate the use of the scrollTop Property to scroll to the bottom of the div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Scroll to Bottom of Div</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#scrollableDiv {
width: 100%;
height: 200px;
overflow-y: scroll;
border: 1px solid #dee2e6;
background-color: #fff;
padding: 10px;
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
p {
margin: 0 0 10px 0;
}
.scrollBtn {
border-radius: 0.25rem;
}
h2 {
text-align: center;
color: #2e8c46;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div id="scrollableDiv">
<h2>Geeks for Geeks</h2>
<p>
GeeksforGeeks is a computer science
portal for geeks. It contains well-written,
well-thought, and well-explained computer
science and programming articles,
quizzes, and practice/competitive
programming/company interview Questions.
</p>
<p>
GeeksforGeeks has grown tremendously since its
inception in 2009 and now has over 2 million
registered users and over 10 million
page views per month.
</p>
<p>
The website covers topics ranging from algorithms,
data structures, programming languages,
software development, to interview preparation
for various tech companies.
</p>
<p>
GeeksforGeeks also provides a platform for users
to practice coding through its coding practice
section and participate in coding contests.
</p>
<p>
Overall, GeeksforGeeks is a valuable
resource for computer science enthusiasts,
students, and professionals seeking to
enhance their knowledge and skills in the
field of computer science and
programming.
</p>
</div>
<button class="btn btn-primary btn-block mt-3
scrollBtn"
onclick="scrollToBottom()">
Scroll to Bottom
</button>
</div>
</div>
</div>
<script>
// Get the scrollable div element
let scrollableDiv =
document.getElementById('scrollableDiv');
// Function to scroll to the bottom of the div
function scrollToBottom() {
scrollableDiv.scrollTop = scrollableDiv
.scrollHeight;
}
</script>
</body>
</html>
114
1
2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<meta name="viewport" content="width=device-width, 7
initial-scale=1.0">8
<title>Scroll to Bottom of Div</title>9
<link rel="stylesheet" href=10
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">11
<style>12
body {13
font-family: Arial, sans-serif;14
background-color: #f8f9fa;15
margin: 0;16
padding: 0;17
display: flex;18
justify-content: center;19
align-items: center;20
height: 100vh;21
}22
23
#scrollableDiv {24
width: 100%;25
height: 200px;26
overflow-y: scroll;27
border: 1px solid #dee2e6;28
background-color: #fff;29
padding: 10px;30
border-radius: 0.25rem;31
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);32
}33
34
p {35
margin: 0 0 10px 0;36
}37
38
.scrollBtn {39
border-radius: 0.25rem;40
}41
42
h2 {43
text-align: center;44
color: #2e8c46;45
}46
</style>47
</head>48
49
<body>50
51
<div class="container">52
<div class="row justify-content-center">53
<div class="col-md-6">54
<div id="scrollableDiv">55
<h2>Geeks for Geeks</h2>56
<p>57
GeeksforGeeks is a computer science58
portal for geeks. It contains well-written, 59
well-thought, and well-explained computer 60
science and programming articles,61
quizzes, and practice/competitive62
programming/company interview Questions.63
</p>64
<p>65
GeeksforGeeks has grown tremendously since its66
inception in 2009 and now has over 2 million67
registered users and over 10 million68
page views per month.69
</p>70
<p>71
The website covers topics ranging from algorithms,72
data structures, programming languages,73
software development, to interview preparation74
for various tech companies.75
</p>76
<p>77
GeeksforGeeks also provides a platform for users78
to practice coding through its coding practice79
section and participate in coding contests.80
</p>81
<p>82
Overall, GeeksforGeeks is a valuable83
resource for computer science enthusiasts,84
students, and professionals seeking to85
enhance their knowledge and skills in the86
field of computer science and87
programming.88
</p>89
</div>90
<button class="btn btn-primary btn-block mt-3 91
scrollBtn" 92
onclick="scrollToBottom()">93
Scroll to Bottom94
</button>95
</div>96
</div>97
</div>98
99
<script>100
101
// Get the scrollable div element102
let scrollableDiv = 103
document.getElementById('scrollableDiv');104
105
// Function to scroll to the bottom of the div106
function scrollToBottom() {107
scrollableDiv.scrollTop = scrollableDiv108
.scrollHeight;109
}110
</script>111
112
</body>113
114
</html>Output:
Using scrollIntoView Method
The scrollIntoView method is available on DOM elements. By default, this method scrolls the element into view, but we can specify options to control the scrolling behavior. In our case, we want to scroll to the bottom, so we pass block: 'end'.
Syntax:
let divElement = document.getElementById('divId');
divElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
Example: To demonstrate the use of the scrollIntoView Property to scroll to the bottom of the div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll to Bottom of Div</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#scrollableDiv {
width: 100%;
height: 200px;
overflow-y: scroll;
border: 1px solid #dee2e6;
background-color: #fff;
padding: 10px;
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
p {
margin: 0 0 10px 0;
}
.scrollBtn {
border-radius: 0.25rem;
}
h2 {
text-align: center;
color: #2e8c46;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div id="scrollableDiv">
<h2>Geeks for Geeks</h2>
<p>
GeeksforGeeks is a computer science
portal for geeks.It contains
well-written, well-thought,and
well-explainedcomputer science and
programming articles, quizzes, and
practice/competitive programming/company
interview Questions.
</p>
<p>
GeeksforGeeks has grown tremendously
since its inception in 2009
and now has over 2 million registered users and
over 10 million page views per month.
</p>
<p>
The website covers topics ranging from algorithms,
data structures, programming languages,
software development, to interview preparation
for various tech companies.
</p>
<p>
GeeksforGeeks also provides a platform for
users to practice coding through its coding
practice section and participate in coding
contests.
</p>
<p>Overall, GeeksforGeeks is a valuable resource for
computer science enthusiasts, students, and
professionals seeking to enhance their knowledge
and skills in the field of computer science
and programming.
</p>
</div>
<button class="btn btn-primary btn-block mt-3 scrollBtn"
onclick="scrollToBottom()">Scroll to
Bottom</button>
</div>
</div>
</div>
<script>
// Get the scrollable div element
var scrollableDiv = document.
getElementById('scrollableDiv');
// Function to scroll to the bottom
//of the div using scrollIntoView method
function scrollToBottom() {
var bottomElement = scrollableDiv.
lastElementChild;
bottomElement
.scrollIntoView({ behavior: 'smooth', block: 'end' });
}
</script>
</body>
</html>
113
1
2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
<title>Scroll to Bottom of Div</title>8
<link rel="stylesheet" href=9
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">10
<style>11
body {12
font-family: Arial, sans-serif;13
background-color: #f8f9fa;14
margin: 0;15
padding: 0;16
display: flex;17
justify-content: center;18
align-items: center;19
height: 100vh;20
}21
22
#scrollableDiv {23
width: 100%;24
height: 200px;25
overflow-y: scroll;26
border: 1px solid #dee2e6;27
background-color: #fff;28
padding: 10px;29
border-radius: 0.25rem;30
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);31
}32
33
p {34
margin: 0 0 10px 0;35
}36
37
.scrollBtn {38
border-radius: 0.25rem;39
}40
41
h2 {42
text-align: center;43
color: #2e8c46;44
}45
</style>46
</head>47
48
<body>49
50
<div class="container">51
<div class="row justify-content-center">52
<div class="col-md-6">53
<div id="scrollableDiv">54
<h2>Geeks for Geeks</h2>55
<p>56
GeeksforGeeks is a computer science 57
portal for geeks.It contains 58
well-written, well-thought,and 59
well-explainedcomputer science and 60
programming articles, quizzes, and61
practice/competitive programming/company62
interview Questions.63
</p>64
<p>65
GeeksforGeeks has grown tremendously66
since its inception in 200967
and now has over 2 million registered users and68
over 10 million page views per month.69
</p>70
<p>71
The website covers topics ranging from algorithms,72
data structures, programming languages,73
software development, to interview preparation74
for various tech companies.75
</p>76
<p>77
GeeksforGeeks also provides a platform for78
users to practice coding through its coding79
practice section and participate in coding80
contests.81
</p>82
<p>Overall, GeeksforGeeks is a valuable resource for83
computer science enthusiasts, students, and84
professionals seeking to enhance their knowledge85
and skills in the field of computer science86
and programming.87
</p>88
</div>89
<button class="btn btn-primary btn-block mt-3 scrollBtn" 90
onclick="scrollToBottom()">Scroll to91
Bottom</button>92
</div>93
</div>94
</div>95
96
<script>97
// Get the scrollable div element98
var scrollableDiv = document.99
getElementById('scrollableDiv');100
101
// Function to scroll to the bottom 102
//of the div using scrollIntoView method103
function scrollToBottom() {104
var bottomElement = scrollableDiv.105
lastElementChild;106
bottomElement107
.scrollIntoView({ behavior: 'smooth', block: 'end' });108
}109
</script>110
111
</body>112
113
</html>Output:
