如何在没有动画的情况下滚动到答案

【问题标题】：how to scrollto without animation如何在没有动画的情况下滚动到
【发布时间】：2016-04-16 02:58:14
【问题描述】：

所以我使用了来自lions-mark 的优秀插件，它可以轻松滚动到任何位置。我主要使用它来让用户在页面刷新时保持在当前滚动位置（别问，我的是在某些情况下具有自动刷新功能的传统游戏网站）

所以我将当前滚动位置存储到 window.onBeforeUnload 上的 localstorage 中，并在页面加载后使用该值滚动到上一个位置。

$('content-grid').scrollTo(offsetBeforeReload);

这可行，但是我想在没有动画滚动的情况下“跳”到那个位置。我不想使用锚点，因为我已经有了这个可以正常工作的 scrollTo 代码，我要做的就是摆脱 scrollTo 动画，让它看起来好像页面被“锚定”到那个位置。

非常感谢任何建议/解决方案！

【问题讨论】：

似乎浏览器自己保持位置。为什么需要手动滚动？
接受的答案应该是 Dexter Legaspi 对mounted() 的引用

标签： javascript jquery html css scroll

【解决方案1】：

我能够实现这一点的方式（在我的例子中：在通过Vue Router 转换到新视图时将滚动动画抑制到顶部：

  mounted() {
    document.documentElement.style.scrollBehavior = 'auto';
    setTimeout(() => window.scrollTo(0, 0), 5);
    setTimeout(() => document.documentElement.style.scrollBehavior = 'smooth', 5);
  }

这允许您更改html 节点的style 属性...从scroll 切换到auto 以停止它，然后在滚动完成后返回scroll。 setTimeout() 实际上很重要，否则切换到 auto 不会真正生效。

请注意，即使您最初将 html 设置为在您的 css 中平滑滚动，这仍然有效：

html {
    scroll-behavior: smooth;
}

我在 MacOS (Big Sur) 上的 Chrome 和 Firefox 上试过这个，它们似乎可以工作（在撰写本文时，Safari 和 Vivaldi 不支持平滑滚动）。

这也应该可以在不使用 Vue.js 的情况下工作。

【讨论】：

这应该是正确答案

【解决方案2】：

只需使用window.scrollTo。这将直接跳转到没有动画的位置。

var xPosition = 0;
var yPosition = 1000;
window.scrollTo(xPosition, yPosition);

【讨论】：

浏览器支持怎么样？
@Qwertiy IE8以后各大浏览器都支持了。
@Qwertiy 是的，就是这个意思。 IE8 在技术上支持它，但它处理单位的方式有点古怪。
CSS 属性scroll-behavior: smooth 无论如何都会引入滚动动画/平滑度。
这并不完全正确。正如@undefined 所说，scroll-behavior: smooth 将为滚动设置动画。

【解决方案3】：

您可以将duration 选项设置为0，它应该会立即滚动到元素。

$('content-grid').scrollTo(offsetBeforeReload, {duration:0});

这是来自 lions-mark 网站的演示，更新后使用零持续时间：JSFiddle

【讨论】：

【解决方案4】：

使用document.getElementByID('your-element').scrollIntoView({behavior: "instant"});

像魅力一样工作！

【讨论】：

为什么会这样？规范中没有提到它，但似乎 Chrome 至少在没有文档的情况下实现了这一点。
instant 不是规范的一部分……关于这个问题正在进行（尽管是旧的）讨论：github.com/w3c/webdriver/issues/1449

【解决方案5】：

window.scrollTo(xPosition, yPosition) 在所有主流浏览器中都可以原生运行。

如果您想使用 jQuery，请尝试以下操作：

$('body,html').animate({ scrollTop: 0, }, 0);

【讨论】：