如何在没有动画的情况下实现滚动到指定位置？

Question

如何在没有动画的情况下实现滚动到指定位置？

8

所以我使用来自lions-mark的优秀插件，使得滚动到任何位置都变得轻松。我主要使用它来在页面刷新时保持用户在当前滚动位置（别问我为什么，我的网站是一个具有自动刷新功能的传统游戏网站）。

所以我将当前滚动位置存储到window.onBeforeUnload的本地存储中，并使用该值在页面加载后滚动到先前的位置。 $('content-grid').scrollTo(offsetBeforeReload); 这个方法可以工作，但是我想要“跳转”到该位置，而不是进行动画式的滚动。我不想使用锚点，因为我已经有了这个能够正常工作的scrollTo代码，我只想摆脱scrollTo动画，并使页面看起来像是“锚定”在那个位置。

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

- Undefined Variable

似乎浏览器会自动保持位置，为什么需要手动滚动呢？ - Qwertiy

被接受的答案应该是Dexter Legaspi提到mounted()的那个。 - moeiscool

7个回答

7

在我的情况下，我能够实现这一点的方法是通过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将不会生效。

请注意，即使您在css中将html初始设置为平滑滚动，这也适用。

html {
    scroll-behavior: smooth;
}

我在MacOS（Big Sur）上的Chrome和Firefox上尝试了一下，它们似乎都可以正常工作。

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

- Dexter Legaspi

1

这应该是正确的答案。 - moeiscool

谢谢，显然函数window.scrollTo即使传递了配置behavior:'auto'仍然会滚动，它是有问题的。 - Vincent

3

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

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

这是来自lions-mark网站的演示，已更新为零持续时间：JSFiddle。

- Turnip

2

只需使用window.scrollTo即可。这会直接跳转到指定位置，不带任何动画效果。

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

- Mike Cluck

浏览器支持如何？ - Qwertiy

@Qwertiy 在IE8之后，所有主要的浏览器都支持它。 - Mike Cluck

@Qwertiy 是的，那就是它的意思。IE8在技术上支持它，但在处理单位时有点古怪。 - Mike Cluck

3

CSS属性 scroll-behavior: smooth 将会引入滚动动画/平滑效果，无论何时滚动。 - undefined

2

这并不完全正确。正如@undefined所说，scroll-behavior: smooth会使滚动具有动画效果。 - Dexter Legaspi

2

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

非常好用！

- Steve Alereza

3

为什么这个能够工作？虽然规范中没有提到，但似乎至少Chrome已经实现了这个功能，但没有文件记录。 - Ben Grant

1

"instant" 不是规范的一部分...关于这个问题已经有一个持续的（尽管有点陈旧）讨论：https://github.com/w3c/webdriver/issues/1449 - Dexter Legaspi

不再起作用了 - evanjmg

1

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

如果你想使用jQuery，请尝试以下方法：

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

- iDubrovinsky

1

窗口滚动到({ top: 0, left: 0, behavior: 'instant' })

- mukul soni

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jesus is Lord · Accepted Answer

这是我所需要的代码： window.scrollTo({ top:50, left:0, behavior: "instant"}) 它可以让页面滚动到顶部。