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?

Are you wanting the button to automatically be displayed at the bottom of the window and then on scroll keep its place? — BuddhistBeast, Mar 18 '15 at 17:27
http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div — Steven Lacks, Mar 18 '15 at 17:28

score 0 · Answer 1 · answered Mar 18 '15 at 17:56

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>

I tried this example. the button is displayed at different vertical places with different screens sizes — Ronald, Mar 19 '15 at 08:31

how to scroll to bottom of a div

1 Answers1