• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Using JavaScript to Scroll to Bottom of Div

Using JavaScript to Scroll to Bottom of Div

April 3, 2022 Leave a Comment

We can use JavaScript to scroll to the bottom of a div by using the scrollTo method along with the offsetTop and offsetHeight properties.

window.scrollTo({ top: (topPositionOfDiv+heightOfDiv), behavior: 'smooth' });

Let’s say I have the following HTML:

<div id="div1">Div to scroll to the bottom of.</div>

To scroll to the bottom of the div, we can use the scrollTo() method. Since we need to scroll to the bottom of the div, we need to get the top position of the div, by using the offsetTop property, and the height of the div, using the offsetHeight property.

We then add these numbers together to get the top number for our scrollTop() method.

Here is the JavaScript code:

var topOfDiv = document.getElementById("div1").offsetTop;
var divHeight = document.getElementById("div1").offsetHeight;
window.scrollTo({ top: (topOfDiv+divHeight), behavior: 'smooth' });

Note that we can also do this with jQuery using the animate() and offset() methods.

Using JavaScript to Scroll to Bottom of Div With a Click

Let’s say we have the following HTML code and we want to scroll smoothly to the bottom of the div. We will add some styles to the div to make it a box.


<div id="box" style="width:150px; height: 150px; background: #7bbfa2; margin-bottom: 10px;"></div>
<div id="click-me" onclick="scrollToBottom()">Scroll</div>

We can utilize both an onclick event method along with the Window scrollTo() method to scroll to the bottom of the div.

We will also need to use the offsetTop property to get the top position of the div on the screen. Since we want the bottom position of the div, we also need to use the offsetHeight property to get the height of the div. We add the height to the top position of the div to get the point we need to scroll to.

Below is the JavaScript code which will allow the user to scroll to the bottom of our box div:

function scrollToBottom() {
  var topOfDiv = document.getElementById("box").offsetTop;
  var divHeight = document.getElementById("box").offsetHeight;
  window.scrollTo({ top: (topOfDiv+divHeight), behavior: 'smooth' });
};

The final code and output for this example of how to scroll to the bottom of a div using JavaScript is below.

Code Output:

Scroll

Full Code:


<div id="box" style="width:150px; height: 150px; background: #7bbfa2; margin-bottom: 10px;"></div>
<div id="click-me" onclick="scrollToBottom()">Scroll</div>

<script>

function scrollToBottom() {
  var topOfDiv = document.getElementById("box").offsetTop;
  var divHeight = document.getElementById("box").offsetHeight;
  window.scrollTo({ top: (topOfDiv+divHeight), behavior: 'smooth' });
};

</script>

Hopefully this article has been useful for you to understand how to use JavaScript to scroll to the bottom of div.

Other Articles You'll Also Like:

  • 1.  Using Javascript to Remove the Id from a Div
  • 2.  Using JavaScript to Remove Forward Slash From String
  • 3.  How to Empty a String in JavaScript
  • 4.  Using JavaScript to Round to 4 Decimal Places
  • 5.  Check if a String Contains Uppercase Letters in JavaScript
  • 6.  How to Check if a String Contains Vowels in JavaScript
  • 7.  Using JavaScript to Check if Number is Divisible by Another Number
  • 8.  Using JavaScript to Check if a Number is Divisible by 3
  • 9.  Using JavaScript to Calculate Average of Array of Numbers
  • 10.  Using JavaScript to Set Visibility

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy