jquery 如何滚动到没有动画

zlwx9yxi  于 2023-08-04  发布在  jQuery
关注(0)|答案(7)|浏览(152)

所以我使用了lions-mark的优秀插件,它允许轻而易举地滚动到任何位置。我使用这个主要是为了当页面刷新时,让用户保持在当前的滚动位置(不要问,我的是一个传统的游戏网站,在某些情况下会自动刷新)
因此,我将当前滚动位置存储到window.onBeforeUnload上的localstorage中,并使用该值在页面加载后滚动到前一个位置。
$('content-grid').scrollTo(offsetBeforeReload);
这是可行的,但我想“跳”到该位置没有动画滚动。我不想使用锚,因为我已经有了这个scrollTo代码,工作得很好,我想做的就是摆脱scrollTo动画,使它看起来好像页面是'锚定'到该位置。
任何建议/解决方案都非常感谢!

icomxhvb

icomxhvb1#

我需要的是
第一个月

nzkunb0c

nzkunb0c2#

我能做到这一点的方式(在我的情况下:要通过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以停止它,然后在滚动完成后返回到scrollsetTimeout()实际上很重要,否则切换到auto实际上不会生效。
请注意,即使您在css中设置了html设置来平滑滚动,这也可以工作:

html {
    scroll-behavior: smooth;
}


我在MacOS(Big Sur)上的Chrome和Firefox上试过这个,它们似乎能用。
这也应该在不使用Vue.js的情况下工作。

lymgl2op

lymgl2op3#

您可以将duration选项设置为0,这将立即滚动到元素。

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

字符串
以下是lions-mark网站上的演示,更新为使用零持续时间:JSFiddle

zwghvu4y

zwghvu4y4#

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

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

字符串

8ehkhllq

8ehkhllq5#

使用document.getElementByID('your-element').scrollIntoView({behavior: "instant"});
像一个魅力!

wfsdck30

wfsdck306#

window.scrollTo(xPosition, yPosition)可以在所有主流浏览器中原生运行。
如果你想使用jQuery,请尝试以下操作:

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

字符串

kpbwa7wx

kpbwa7wx7#

window.scrollTo({ top:0,左:0,行为:'instant' })

相关问题