sample

by sii_side

HTML

<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">
  <button>push</button>
</div>

CSS

.d1 {
  height: 600px;
  background-color: #fcc;
}

.d2 {
  display: none;
  height: 200px;
  background-color: #ccf;
}

.d3 {
  height: 600px;
  background-color: #cfc;
}

JavaScript

$("button").on("click", function() {
	$("html, body").animate({
  	scrollTop: "+=200px"
  });
  $(".d2").slideDown();
});