Scrolling effect: Slow at first than it goes fast

I'm trying to create a scrolling effect where when the onclick event is triggered, I want that div1 to scroll to dev2. It should initially go slowly and then fast!.

Here's a website using this effect: http://community.saucony.com/kinvara3/

How do I do this?

Solution

$.fn.animateScrollDivs = function(sourceDiv, destinationDiv) {
  var source = '#' + sourceDiv;
  var destination = '#' + destinationDiv;

  $('html, body').animate({
    scrollTop: $(destination).offset().top
  }, 1200, 'easeInExpo');

};

function animateDiv(sourceDiv, destinationDiv) {

  $.fn.animateScrollDivs(sourceDiv, destinationDiv);

}

div {
  height: 650px;
  width: 1000px;
}
button {
  background-color: #FE2EF7;
}
.downButton {
  margin-top: 500px;
  margin-bottom: 40px;
  margin-right: 200px;
  margin-left: 200px;
}
.upButton {
  margin-top: 60px;
  margin-bottom: 500px;
  margin-right: 200px;
  margin-left: 200px;
}

<body>
  <div id="div1" style="background-color:red;">
    <button class="downButton" onclick="animateDiv('div1','div2');">Go Down</button>
  </div>
  <div id="div2" style="background-color:yellow;">
    <button class="upButton" onclick="animateDiv('div2','div1');">Go Up</button>
    <button class="downButton" onclick="animateDiv('div2','div3');">Go Down</button>
  </div>
  <div id="div3" style="background-color:grey;">
    <button class="upButton" onclick="animateDiv('div3','div2');">Go Up</button>
    <button class="downButton" onclick="animateDiv('div3','div4');">Go Down</button>
  </div>
  <div id="div4" style="background-color:#2E9AFE;">
    <button class="upButton" onclick="animateDiv( 'div4', 'div1');">GoToTop</button>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js "></script>

Will this do?? Please adjust the position of button(s) as per your requirement.

I've used jQuery mmin (1.11) and jQuery UI (1.11).