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>
