如何使window.scrollTo（）具有平滑效果

Z时代
2024-01-10
分类：问答

我可以使用以下内容滚动到200px

btn.addEventListener("click", function(){
    window.scrollTo(0,200);
})

但是我想要一个平滑的滚动效果。我该怎么做呢？

回答：

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>

递归方法：

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>