页面加载时自动垂直滚动

Question

我有一个react项目。

当用户到达一个页面时，他们没有意识到只有向下滚动才能有更多的选项。

所以我想在页面加载时以平滑的方式自动垂直滚动，向用户显示他们拥有的所有选项。

在react中实现这一点的方法是什么？

Answer 1

我建议两种方法。

首先是在加载动画的情况下转换整个页面。

CSS

body{
animation: scrollUp 1s;
}
@keyframes scrollUp {
from {transform: translate(1000px)}
to{transform: translate()}
}

第二种方法是在页面加载时手动将window.scroll值设置为1000或您想要的任何位置，然后使用window.scrol平滑滚动到顶部。

在第一次渲染之前(可能使用requestAnimationFrame(

window.scrollTo(1000, 0)

然后在下一帧

window.scroll({
top: 0, 
left: 0, 
behavior: 'smooth'
});

https://css-tricks.com/snippets/jquery/smooth-scrolling/