如何立即滚动到位置？答案

【问题标题】：How to Instantly Scroll to Position?如何立即滚动到位置？
【发布时间】：2019-11-27 11:41:12
【问题描述】：

启用平滑滚动后，如何使用 JavaScript 立即将窗口滚动到某个位置？

:root {
    scroll-behavior: smooth;
}

有没有办法忽略这个 CSS 规则？像这样的：

window.scrollBy({ top: 0, behavior: 'instantly' });

【问题讨论】：

behavior 的唯一有效值是 smooth 和 auto。没有instantly。
@Turnip 哦，真的吗？你在开玩笑，不是吗？我知道没有behavior: instantly，我写了作为例子。
@Turnip 好的，好的。我知道我不能用scrollBy 做到这一点，我正在寻找其他方式来实现即时滚动。这只是我想要得到的一个例子。

标签： javascript scroll smooth-scrolling

【解决方案1】：

你去吧：

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'instant',
});

【讨论】：

【解决方案2】：

也许您可以在调用.scrollBy() 之前设置scroll-behavior，然后再将其重置。

var root = document.querySelector(':root');
var btnInstantScroll = document.querySelector('#btnInstantScroll');
var btnDefaultScroll = document.querySelector('#btnDefaultScroll');

btnInstantScroll.addEventListener('click', function() {

  // Change scroll behavior
  root.setAttribute("style", "scroll-behavior: auto;");

  // Timeout ensures styles are applied before scrolling
  setTimeout(function() {
    window.scrollBy(0, -2000);
    
    // Reset to CSS defaults.
    root.removeAttribute("style");
  }, 0)

})

btnDefaultScroll.addEventListener('click', function() {
  window.scrollBy(0, -2000);
})

:root {
  scroll-behavior: smooth;
}

.scrollable {
  height: 2000px;
  background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
}

.controls {
  padding: 15px;
  position: fixed;
  bottom: 0;
}

<div class="scrollable">

</div>

<div class="controls">
  <button type="button" id="btnInstantScroll">
    Instant scroll
  </button>

  <button type="button" id="btnDefaultScroll">
    Scroll using doc settings
  </button>
</div>

【讨论】：

我认为有一种更直接的方法可以做到这一点，而无需重置scroll-behavior。无论如何，它有效，所以谢谢你。

【解决方案3】：

你试过滚动选项behavior: auto吗？

var scrollOptions = {
    left: leftValue,
    top: topValue,
    behavior: 'auto'
}

window.scrollBy(scrollOptions);

【讨论】：

【解决方案4】：

scroll-behavior: auto; 不起作用。而 scroll-behavior: instant; 不再存在

这是唯一对我有用的东西：

html {

  scroll-behavior: auto !important;

}

【讨论】：