scrollTo

HTML

<div class="projectContainer">
   <div class="projectHeader one">
      <div class="buttonToggleProjectDetails">Open Project</div>
   </div>

   <div class="projectHeader two">
      <div class="buttonToggleProjectDetails">Open Project</div>
   </div>

   <div class="projectHeader three">
      <div class="buttonToggleProjectDetails">Open Project</div>
   </div>

   <div class="projectHeader four">
      <div class="buttonToggleProjectDetails">Open Project</div>
   </div>

   <div class="projectHeader five">
      <div class="buttonToggleProjectDetails">Open Project</div>
   </div>

</div>

CSS

* {
   padding: 0px;
   margin: 0px;
}

.projectContainer {
   width: 100%;
   background-color: aqua;
}

.projectHeader {
   max-width: 960px;
   width: 100%;
   height: 100vh;
   background-color: #ff7900;
   margin: 0 auto;
   position: relative;
}

.buttonToggleProjectDetails {
   padding: 10px 0;
   background-color: black;
   color: white;
   width: 200px;
   margin: 0 auto;
   text-align: center;
   position: absolute;
   bottom: 50px;
   left: 0;
   right: 0;
}

.projectDetails {
   max-width: 960px;
   width: 100%;
   height: 3000px;
   background-color: #FC5E61;
   margin: 0 auto;
   position: relative;
}

.one {
   background-color: blueviolet;
}

.two {
   background-color: antiquewhite;
}

.three {
   background-color: aliceblue;
}

.four {
   background-color: coral;
}

.five {
   background-color: darkcyan;
}

JavaScript

var
  /* Cache the buttons. */
  buttons = $(".buttonToggleProjectDetails"),
  
  /* Create an array of flags. */
  flags = Array(buttons.length);

/* Set the 'click' event. */
buttons.click(function() {
  var
    /* Define a variable to store the element whose offset will be used. */
    element,
    
    /* Cache the button. */
    button = $(this),
    
    /* Find the index of the button in the buttons collection. */
    index = [].indexOf.call(buttons, this);
  
  /* Reverse the flag. */
  flags[index] = !flags[index];
  
  /* Determine the element and the content of the button based on the click. */
  if (flags[index]) {
    element = button;
    button.html("Close Project");
  } else {
    element = button.parent();
    button.html("Open Project");
  }

  /* Animate the scroll. */
  $("html, body").animate({scrollTop: element.offset().top}, "slow");
});