ADVERTISEMENT
animate scroll div to the bottom

Animated! Scroll HTML Div to the Bottom Using JQuery

Leave a Comment / jquery / By

Ever wanted to scroll an HTML Div or any HTML element to the bottom? This article is going to demonstrate how you can animate scroll to the bottom of any HTML element using JQuery.

Following is an indicator of what we are expected to achieve.

View it on Giphy
Scrolling a Div or any HTML element to the bottom can be applied in many scenarios especially when create a Chatbox, for example, you would like users messages to be automatically scrolled to the bottom once a new message arrives or when sending a message.

To scroll a div or page to the bottom, we are going to use animate()  function and scrollHeight property of JQuery.

Example on How to Animate Scroll to the Bottom of Div  Using JQuery

The following code illustrates how to scroll div to the bottom using JQuery with animation effect.



<!DOCTYPE html>
<html>
<head>
  <title>Animated! Scroll div to the bottom using JQuery </title>
  <script src="jquery.js"></script>
  <script>

    $(function(){
      $("#scroll-div-button").click(function(){
        $(".my-div").animate({ scrollTop: $('.my-div').prop("scrollHeight")}, 1000);
      });
    });
  </script>

  <style>
    body{
      padding: 20px;
    }

    .my-div{
      height: 300px;
      width: 300px;
      overflow-y: scroll; 
      margin: 0 auto; 
      border: 1px solid #e1e1e1;
      border-radius: 3px; 
      padding: 10px;
    }

    button{
      margin: 0 auto;
      display: block; 
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="my-div">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br/> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <button id='scroll-div-button'>Click Here to Scroll This Div to Bottom</button>
</body>
</html>

The only code that’s required to scroll a div to the bottom is the following!

$(".my-div").animate({ scrollTop: $('.my-div').prop("scrollHeight")}, 1000);

Here we are telling the jquery scroll div to the bottom and animate the process for 1 second. This example will make our div to scroll to the bottom animatedly.