javascript - 返回下一个js时如何更改滚动行为？

Question

我在索引 js 中获取一个帖子列表，如下所示:

const Index = (props) => {
    return (
        <div>
            {props.posts.map((each) => {
                return (
                    <Link scroll={false} as={`/post/${each.id}`} href="/post/[id]" key={each.id}>
                        <a>
                            <h1>{each.title}</h1>
                        </a>
                    </Link>
                );
            })}
        </div>
    );
};

export async function getStaticProps() {
    const url = `https://jsonplaceholder.typicode.com/posts`;
    const res = await axios.get(url);

    return {
        props: { posts: res.data }
    };
}

当用户点击任何链接时，它会转到发布页面，即:

function post({ post }) {
    return (
            <h1>{post.id}</h1>
    );
}

export async function getServerSideProps({ query }) {
    const { id } = query;
    const res = await Axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);

    return {
        props: { post: res.data}
    };
}

问题是当我单击返回时，滚动位置重置为顶部并获取所有帖子。
我包括 scroll={false}在链接中，但它不起作用。
当用户从帖子页面点击返回时，如何防止滚动重置？

Answer 1

Next.js 实际上已经内置支持在返回上一页时恢复滚动位置。我们可以简单地通过编辑 next.config.js 来启用它。 :

module.exports = {
  experimental: {
    scrollRestoration: true,
  },
}