Is it possible to preserve the page's scroll position with f-client-nav and Partials?

[GabrielBarbosaGV]

Hello, all! Hope you are doing well. I thank the community for such an amazing framework, I love it!

I have been playing around with the framework, in which I intend to create my personal website, but have been having a problem where client-side navigation resets the page scroll. These are my relevant components:

routes/index.tsx:

import { tw, css } from '@twind/core';
import { PageProps } from "$fresh/server.ts";
import PostListModal from "../components/PostListModal.tsx";
import { Partial } from "$fresh/runtime.ts";
import { fadeInKeyframes } from "$lib/fade-in-keyframes.ts";

export default function Home({ url }: PageProps) {
  const fadeInClass = css`animation: 1.5s ${fadeInKeyframes} ease-out;`;

  const postsModalOpen = url.searchParams.get('postsDialogOpened') === 'true';

  return (
    <div className={tw(`min-h-screen text-gray-200 bg-slate-900`)}>
      <div className={tw(`flex flex-col justify-center items-center`)}>
        <div className={tw(`w-full`)}>
          <img className={tw(`absolute h-screen w-full object-cover`)} src="/top-image.webp" />

          <div className={tw(`absolute h-screen w-full bg-gradient-to-b from-transparent to-slate-900`)} />

          <div className={tw(`flex items-center justify-center w-full h-screen text-3xl`)}>
            <span className={tw(`absolute z-10 ${fadeInClass} text-white`)}>
              Hello, world!
            </span>
          </div>
        </div>

        <div className={tw(`mx-20 my-10 flex flex-col justify-center items-center`)}>
          <p>
            My name is Gabriel, a software developer for five years now. With quite a lot to learn ahead,
            I'm consistently charmed by the day-to-day of software development, and I do not think I will
            soon tire. This website exists merely for me to write down my sentiments with regards to 
            programming trends and my preferred technologies, but I hope you find something of interest
            to yourself in it. Welcome!
          </p>
        </div>

        <div className={tw(`absolute`)} f-client-nav>
          <Partial name="posts-modal">
            {postsModalOpen
              ? (() => {
                const posts = [
                  ['Google', 'https://google.com'],
                  ['Youtube', 'https://youtube.com']
                ] as [string, string][];

                return (
                  <>
                    <PostListModal posts={posts} />
                    <a href="?">Close posts modal</a>
                  </>
                );
              })()
              : <a href="?postsDialogOpened=true">Open posts modal</a>}
            </Partial>
          </div>
      </div>
    </div>
  );
}

components/PostListModal.tsx:

import { tw, css } from "@twind/core";
import { FunctionComponent } from "preact";
import { fadeInKeyframes } from "$lib/fade-in-keyframes.ts";

type title = string;
type url = string;

interface Props {
  posts: [title, url][]
}

const PostListModal: FunctionComponent<Props> = ({ posts }) => {
  const fadeInClass = css`animation: 1s ${fadeInKeyframes} ease-out;`;

  return (
    <div className={tw(`absolute ${fadeInClass}`)}>
      <div className={tw(`flex flex-col`)}>
        {posts.map(([title, url]) => (
          <a href={url}>{title}</a>
        ))}
      </div>
    </div>
  );
};

export default PostListModal;

Am I doing something wrong, or is this the expected behavior? I would like to preserve the scroll across navigation.

Many thanks, and have a great day!

[GabrielBarbosaGV]

Good morning, everyone!

Apologies for my oversight, the simple "fix" to this is to use a

<button f-partial="{url-here}">Click me</button>

This was shown in fresh.deno.dev, but my brain defaulted to links.

Many thanks!