2018更新

现在，您可以使用window.scrollTo({ top: 0, behavior: 'smooth' })来平滑滚动页面。

const btn = document.getElementById('elem');



btn.addEventListener('click', () => window.scrollTo({

  top: 400,

  behavior: 'smooth',

}));


#x {

  height: 1000px;

  background: lightblue;

}


<div id='x'>

  <button id='elem'>Click to scroll</button>

</div>

较旧的解决方案

您可以执行以下操作：

var btn = document.getElementById('x');



btn.addEventListener("click", function() {

  var i = 10;

  var int = setInterval(function() {

    window.scrollTo(0, i);

    i += 10;

    if (i >= 200) clearInterval(int);

  }, 20);

})


body {

  background: #3a2613;

  height: 600px;

}


<button id='x'>click</button>

ES6 递归方法：

const btn = document.getElementById('elem');



const smoothScroll = (h) => {

  let i = h || 0;

  if (i < 200) {

    setTimeout(() => {

      window.scrollTo(0, i);

      smoothScroll(i + 10);

    }, 10);

  }

}



btn.addEventListener('click', () => smoothScroll());


body {

  background: #9a6432;

  height: 600px;

}


<button id='elem'>click</button>