Navigate with Anchors moves in the wrong location

[diogo-vf]

Hi !
I create my first SvelteKit application and I encounter a problem with anchors and can't find how to fix that...

In my navbar i've anchors multiple anchors:

• /en#faq
• /en#numbers
• /en/highlights#news
• /en/highlights#highlights

When I use direct URL it works perfectly, I'm on the right location in my page, but when I use my navbar having
<a href="<my-link>" data-sveltekit-preload-data="tap">_my text_</a>
for highlights I'm in the bottom of the page... and in the homepage I'm in the top or middle.
When I'm in homepage and use:

• /en#faq
• /en#numbers
  It places me perfectly ! I can't understand why on changing the page it breaks

This is my code to manage the anchor scroll in /src/+layout.svelte page

<script lang="ts">
  import { afterNavigate } from '$app/navigation';
  import { page } from '$app/state';
  import Button from '$lib/components/Button.svelte';
  import Analytics from '$lib/components/GDPR/Analytics.svelte';
  import Heading from '$lib/components/Heading.svelte';
  import Link from '$lib/components/Link.svelte';
  import Image from '$lib/components/Media/Image.svelte';
  import Nav from '$lib/components/Nav/Nav.svelte';
  import SocialNetworks from '$lib/components/SocialNetworks.svelte';
  import { locale, t } from '$lib/translations';
  import { Send } from 'lucide-svelte';
  import { tick, type Snippet } from 'svelte';
  import { twMerge } from 'tailwind-merge';
  import '../app.css';
  import { type PageData } from './[locale=locale]/$types';

  let { children } = $props<{ children: Snippet }>();
  const origin = $derived(page.url.origin);
  const translations = $derived((page.data as PageData).translations[locale.get()]);
  const seo = $derived.by(() => {
    const pageData = $state(page.data as PageData);
    return {
      title: pageData.seo.title,
      description: pageData.seo.description,
      canonical: pageData.seo.canonical,
      alternates: pageData.seo.alternate
        .map(
          (alternate) =>
            `<link rel="alternate" hreflang="${alternate.hreflang}" href="${origin}${alternate.href}" />`
        )
        .join('\n'),
      image: pageData.seo.image
    };
  });

  const scrollToAnchor = (hash: string) => {
    const anchor = document.querySelector(hash);
    anchor?.scrollIntoView({behavior: "instant"});
  };
  afterNavigate(async (nav) => {
    /*
     * Go to Anchor tags !
     */
    const hash = nav.to?.url?.hash;
    if (hash) {
        await tick();
        scrollToAnchor(hash);
    }
  });
</script>

Anyone has an idea why navigate with menu doesn't work, but direct navigation works ?
I suppose it's occurs because the full page load comes after the scroll, but I don't think use a setTimeout of 3-5sec it's the solution and yes I try for the test.

[diogo-vf]

After confirmation with some friends, the bug comes from an update. They have same problem for client-side requests after svelte/sveltekit update