如何制作平滑的滚动效果

Question

我需要使滚动与此处相同：

https://forner.studio/

https://synchronized.studio/

如您所见，两个网站在滚动时都非常流畅。 非常感谢你的帮助！

Answer 1

您可以将此添加到您的 CSS：

html {
  scroll-behavior: smooth;
}

或者，您可以根据需要以三种不同的方式将其与 javascript 一起添加：

// goes to specific height position at 2500 pixels:
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// scrolls 100 pixels from the current position:
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// scrolls to an element with class .hello:
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});