Using jquery to scroll down to #lower div

Question

I'm trying to use jquery to scroll down to the #lower div but it's not working for some reason. What am I doing wrong?

$(function() {

  $('html, body').animate({
    scrollTop: $("#lower").offset().top;
  }, 0); //end of animate 

}); //end of $(function()

#upper {
  border: 1px solid red;
  width: 100%;
  height: 100%;
}
#lower {
  border: 1px solid blue;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div id='upper'>Upper</div>
<div id='lower'>Lower</div>

Answer 1

Try removing ; : Uncaught SyntaxError: Unexpected token ; following $("#lower").offset().top ; adding top property to #lower greater than window.innerHeight to provide viewport distance between #upper , #lower elements

$(function() {

  $('html, body').animate({
    scrollTop: $("#lower").offset().top
  }, 0); //end of animate 

}); //end of $(function()

#upper {
  border: 1px solid red;
  width: 100%;
  height: 100%;
}
#lower {
  top:300px;
  position:relative;
  border: 1px solid blue;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<div id='upper'>Upper</div>
<div id='lower'>Lower</div>