how to scroll to bottom of a div

Question

I would like to scroll to the bottom of the div content-main , so that the button Button is displayed at the bottom of the window . I tried the following:

<div class="container">
    <div class="content-main">
    dynamic content dynamic content.....  
    <button>Button </button>
    </div>
    <div class ="footer"></div>
</div>
<script>
    var mainContentHeight = $(".content-main").height();
    var footerHeight = $(".content-footer").height();
    window.scrollTo(0, mainContentHeight - footerHeight);
</script>

This works differently, when I test it in two monitors with different size. How to display the button at the bottom of the window?

Answer 1

Instead binding scrollTo to the window object, bind it to the element you want to scroll:

 var container = $('.container')[0]; var contentMain = $('.content-main')[0]; var mainContentHeight = $(".content-main").height(); var footerHeight = $(".content-footer").height(); container.scrollTo(0, mainContentHeight - footerHeight); 

  .container { overflow: auto; height: 100px; } .content-main { height: 100%; position: relative; border: 1px solid #000; height: 1000px; } .content-footer { height: 50px; } button { position: absolute; bottom: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="content-main"> dynamic content dynamic content..... <button>Button </button> </div> <div class="content-footer"></div> </div>