如何滚动到div的底部

Question

我想滚动到div content-main的底部，以便在Button显示按钮bottom of the window。我尝试了以下方法：

<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>

当我在两个不同大小的显示器上测试它时，这种方式有所不同。如何在窗口底部显示按钮？

Answer 1

而是将scrollTo绑定到window对象，将其绑定到要滚动的元素：

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>