How to make a transition of scrollTop?

[vogdb]

Please consider these two fiddles:

• scrollTop works with pure animate http://jsfiddle.net/a935jx9r/1/

  <div style='width:400px; height: 2000px;'>
    <button id='down' style='position: absolute; top: 20px'>To the bottom></button>
    <button id='up' style='position: absolute; top: 1950px'>To the top!</button>
 </div>

$(document).ready(function(){
  $('#up').click(function(){
    console.log('We must go up!');
    $('body').animate({scrollTop: 0}, 500);
  });
  $('#down').click(function(){
    console.log('We must go down!');
    $('body').animate({scrollTop: 1900}, 500);
  });
  $('body').scrollTop(1900);
});

• scrollTop does not work with the latest transition http://jsfiddle.net/aaf62fou/1/

  <div style='width:400px; height: 2000px;'>
    <button id='down' style='position: absolute; top: 20px'>To the bottom></button>
    <button id='up' style='position: absolute; top: 1950px'>To the top!</button>
 </div>

$(document).ready(function(){
  $('#up').click(function(){
    console.log('We must go up!');
    $('body').transition({scrollTop: 0}, 500);
  });
  $('#down').click(function(){
    console.log('We must go down!');
    $('body').transition({scrollTop: 1900}, 500);
  });
  $('body').scrollTop(1900);
});

[wuservices]

The issue is that scrollTop isn't actually a CSS attribute so it can't be animated via CSS. You'd have to fake it via another attribute. See http://stackoverflow.com/questions/10260666/animate-scrolling-with-css3.

[alisajidcs]

body {
  scroll-behavior: smooth;
}

@vogdb Just use this CSS property and even normal JS will work for you document.body.scrollTop = 0