How to reproduce

• View the page with enough width (say a desktop) where list and detail are shown side by side
• Click show more, go to page 2 or 3 or any other page than 1
• Click on any item
• Boom, we jump straight to the top

Codesandbox Link

Here is the codesandbox clearly illustrating the issue

Tried a different virtual list library and still getting the same problem

Third attempt with svelte-virtual-scroll-list and still no luck

• Removing that virtual list and simply looping through items doesn't have this issue

• Not sure which file is causing it but for stackoverflow purposes, I'll share the +layout.ts and +layout.svelte file and the state file

lib/state/LatestNewsItems.svelte.ts

import type { Cursor } from '$lib/types/Cursor';
import type { NewsFilter } from '$lib/types/NewsFilter';
import type { NewsItem } from '$lib/types/NewsItem';

export class LatestNewsState {
    cursor: Cursor = $state({ lastFeedItemId: undefined, lastPubdate: undefined });
    filter: NewsFilter = $state('latest');
    mapNewsItemIdToTrue = new Map<string, boolean>();
    newsItems: NewsItem[] = $state([]);
    search: string = $state('');

    appendNewsItems(items: NewsItem[]) {
        for (let i = 0; i < items.length; i++) {
            const item = items[i];
            if (!this.mapNewsItemIdToTrue.get(item.id)) {
                this.newsItems.push(item);
                this.mapNewsItemIdToTrue.set(item.id, true);
            }
        }
        const lastItem = this.newsItems[this.newsItems.length - 1];
        if (lastItem) {
            this.cursor.lastFeedItemId = lastItem.id;
            this.cursor.lastPubdate = lastItem.pubdate;
        }
    }

    clearNewsItems() {
        this.newsItems.splice(0, this.newsItems.length);
        this.cursor.lastFeedItemId = undefined;
        this.cursor.lastPubdate = undefined;
        this.mapNewsItemIdToTrue.clear();
    }

    hasFilterOrSearchChanged(filter: NewsFilter, search: string) {
        return !this.isEqualFilter(filter) || !this.isEqualSearch(search);
    }

    isEqualFilter(filter: NewsFilter) {
        return filter === this.filter;
    }

    isEqualSearch(search: string) {
        return search === this.search;
    }
}

+layout.ts

import { browser } from '$app/environment';
import { requestProperties } from '$lib/config';
import {
    getNewsListFirstPageEndpoint,
    getNewsListWithPinnedItemFirstPageEndpoint
} from '$lib/endpoints/backend';
import { isDetailRoute } from '$lib/functions';
import { latestNewsState } from '$lib/state';
import type { NewsFilter } from '$lib/types/NewsFilter';
import type { NewsItem } from '$lib/types/NewsItem';
import type { LayoutLoad } from './$types';

const fetchNewsItemsFromCache = (
    newsItems: NewsItem[]
): Promise<{ status_code: number; data: NewsItem[] }> => {
    return new Promise((resolve) => {
        resolve({ status_code: 200, data: newsItems });
    });
};

const fetchNewsItemsFromAPI = (
    endpoint: string,
    fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>
): Promise<{ status_code: number; data: NewsItem[] }> => {
    return new Promise((resolve, reject) => {
        fetch(endpoint, requestProperties)
            .then((response) => {
                if (!response.ok) {
                    throw new Error(
                        `Something went wrong while loading news items ${response.status} ${response.statusText}`
                    );
                }
                return response.json();
            })
            .then(resolve)
            .catch(reject);
    });
};

const getNewsListEndpoint = (
    filter: NewsFilter,
    id: string | undefined,
    search: string,
    title: string | undefined
) => {
    let endpoint;
    if (isDetailRoute(id, title)) {
        endpoint = getNewsListWithPinnedItemFirstPageEndpoint(filter, id, search);
    } else {
        endpoint = getNewsListFirstPageEndpoint(filter, search);
    }
    return endpoint;
};

const shouldFetchItemsFromAPI = (filter: NewsFilter, id: string | undefined, search: string) => {
    const hasFilterOrSearchChanged = latestNewsState.hasFilterOrSearchChanged(filter, search);
    const doesItemExistInCache = latestNewsState.mapNewsItemIdToTrue.has(id as string);
    return hasFilterOrSearchChanged || !doesItemExistInCache;
};

const loadOnBrowser = (
    filter: NewsFilter,
    fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>,
    id: string | undefined,
    search: string,
    title: string | undefined
) => {
    let latestNewsPromise;
    if (shouldFetchItemsFromAPI(filter, id, search)) {
        console.log('oh no lets load');
        const endpoint = getNewsListEndpoint(filter, id, search, title);
        latestNewsState.clearNewsItems();
        latestNewsState.filter = filter;
        latestNewsState.search = search;
        latestNewsPromise = fetchNewsItemsFromAPI(endpoint, fetch);
    } else {
        latestNewsPromise = fetchNewsItemsFromCache(latestNewsState.newsItems);
    }
    return {
        filter,
        id,
        latestNewsPromise,
        search,
        title
    };
};

const loadOnServer = (
    filter: NewsFilter,
    fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>,
    id: string | undefined,
    search: string,
    title: string | undefined
) => {
    const endpoint = getNewsListEndpoint(filter, id, search, title);
    return {
        filter,
        id,
        latestNewsPromise: fetchNewsItemsFromAPI(endpoint, fetch),
        search,
        title
    };
};

export const load: LayoutLoad = ({ fetch, params, url }) => {
    const filter = (url.searchParams.get('filter') as NewsFilter) || 'latest';
    const id = params.id;
    const search = url.searchParams.get('search') || '';
    const title = params.title;

    if (browser) {
        return loadOnBrowser(filter, fetch, id, search, title);
    } else {
        return loadOnServer(filter, fetch, id, search, title);
    }
};

+layout.svelte

<script lang="ts">
    import { VList } from 'virtua/svelte';
    import '$lib/css/main.css';
    import { page } from '$app/state';
    import { MediaQuery } from 'svelte/reactivity';
    import type { NewsItem } from '$lib/types/NewsItem.js';
    import { isDetailRoute } from '$lib/functions';
    import {
        getNewsListNextPageEndpoint,
        getNewsListWithPinnedItemNextPageEndpoint
    } from '$lib/endpoints/backend';
    import { getNewsDetailEndpoint, getNewsListEndpoint } from '$lib/endpoints/frontend.js';
    import { goto } from '$app/navigation';
    import type { NewsFilter } from '$lib/types/NewsFilter.js';
    import { latestNewsState } from '$lib/state/index.js';
    import { requestProperties } from '$lib/config/index.js';

    const large = new MediaQuery('min-width: 800px');
    const { children, data } = $props();
    const hasNoDetailSelected = $derived.by(() => {
        return (
            page.url.pathname === '/' ||
            page.url.pathname === '/news' ||
            page.url.pathname === `/news/${page.params.tag}`
        );
    });

    const filter = $derived(data.filter);
    const id = $derived(data.id);
    const search = $derived(data.search);
    const title = $derived(data.title);

    let newSearch = $state('');

    $effect(() => {
        data.latestNewsPromise
            .then((items) => {
                latestNewsState.appendNewsItems(items.data);
            })
            .catch((error: Error) => {
                console.error(`Something went wrong when loading news items ${error.message}`);
            });
    });

    async function showMore() {
        try {
            let endpoint;
            if (isDetailRoute(page.params.id, page.params.title)) {
                endpoint = getNewsListWithPinnedItemNextPageEndpoint(
                    latestNewsState.cursor,
                    filter,
                    id,
                    search
                );
            } else {
                endpoint = getNewsListNextPageEndpoint(latestNewsState.cursor, filter, search);
            }

            const response = await fetch(endpoint, requestProperties);
            if (!response.ok) {
                throw new Error(
                    `Something went wrong when loading news items on page N ${response.status} ${response.statusText}`
                );
            }
            const { data: items }: { data: NewsItem[] } = await response.json();
            latestNewsState.appendNewsItems(items);
        } catch (error) {
            console.log(
                `Something when wrong when executing show more ${error instanceof Error ? error.message : ''}`
            );
        }
    }

    function onFilterChange(e: Event) {
        const newFilterValue = (e.target as HTMLSelectElement).value;
        let to;
        if (isDetailRoute(page.params.id, page.params.title)) {
            to = getNewsDetailEndpoint(newFilterValue as NewsFilter, id, search, title);
        } else {
            to = getNewsListEndpoint(newFilterValue as NewsFilter, search);
        }
        return goto(to);
    }

    function onSearchChange(e: KeyboardEvent) {
        if (e.key === 'Enter') {
            let to;
            if (isDetailRoute(page.params.id, page.params.title)) {
                to = getNewsDetailEndpoint(filter as NewsFilter, id, newSearch, title);
            } else {
                to = getNewsListEndpoint(filter as NewsFilter, newSearch);
            }
            return goto(to);
        }
    }
</script>

<header>
    <div>
        <a data-sveltekit-preload-data="off" href="/">TestNewsApp</a>
    </div>
    <div>
        On desktop, list + detail are shown side by side, on mobile you'll see either the list or the
        detail depending on the url
    </div>
</header>

{#if large.current}
    <main style="flex-direction:row;">
        <div class="list">
            <section class="panel">
                <span>Filter: {filter}</span>
                <span>Search: {search}</span>
            </section>
            <br />
            <div class="panel">
                <section class="list-filter" onchange={onFilterChange}>
                    <select>
                        {#each ['latest', 'likes', 'dislikes', 'trending'] as filterValue}
                            <option selected={filter === filterValue}>{filterValue}</option>
                        {/each}
                    </select>
                </section>
                <section>
                    <input
                        placeholder="Search for 'china'"
                        type="search"
                        name="search"
                        value={search}
                        oninput={(e: Event) => {
                            newSearch = (e.target as HTMLInputElement).value;
                        }}
                        onkeydown={onSearchChange}
                    />
                </section>
            </div>

            <nav>
                {#await data.latestNewsPromise}
                    <span>Loading items...</span>
                {:then}
                    <VList data={latestNewsState.newsItems} getKey={(newsItem: NewsItem) => newsItem.id}>
                        {#snippet children(newsItem, index)}
                            <div class="list-item" class:selected={page.params.id === newsItem.id}>
                                <a
                                    data-sveltekit-preload-data="off"
                                    href={getNewsDetailEndpoint(filter, newsItem.id, search, newsItem.title)}
                                    >{index + 1} {newsItem.title}</a
                                >
                            </div>
                            {#if index === latestNewsState.newsItems.length - 1}
                                <footer>
                                    <button onclick={showMore}>Show More</button>
                                </footer>
                            {/if}
                        {/snippet}
                    </VList>
                {/await}
            </nav>
        </div>
        <div class="detail">
            {@render children()}
        </div>
    </main>
{:else if !large.current && hasNoDetailSelected}
    <main style="flex-direction:column;">
        <div class="list">
            <section class="panel">
                <span>Filter: {filter}</span>
                <span>Search: {search}</span>
            </section>
            <br />
            <div class="panel">
                <section class="list-filter" onchange={onFilterChange}>
                    <select>
                        {#each ['latest', 'likes', 'dislikes', 'trending'] as filterValue}
                            <option selected={filter === filterValue}>{filterValue}</option>
                        {/each}
                    </select>
                </section>
                <section>
                    <input
                        placeholder="Search for 'china'"
                        type="search"
                        name="search"
                        value={search}
                        oninput={(e: Event) => {
                            newSearch = (e.target as HTMLInputElement).value;
                        }}
                        onkeydown={onSearchChange}
                    />
                </section>
            </div>
            <nav>
                {#await data.latestNewsPromise}
                    <span>Loading items...</span>
                {:then}
                    <VList data={latestNewsState.newsItems} getKey={(newsItem: NewsItem) => newsItem.id}>
                        {#snippet children(newsItem, index)}
                            <div class="list-item" class:selected={page.params.id === newsItem.id}>
                                <a
                                    data-sveltekit-preload-data="off"
                                    href={getNewsDetailEndpoint(filter, newsItem.id, search, newsItem.title)}
                                    >{index + 1} {newsItem.title}</a
                                >
                            </div>
                            {#if index === latestNewsState.newsItems.length - 1}
                                <footer>
                                    <button onclick={showMore}>Show More</button>
                                </footer>
                            {/if}
                        {/snippet}
                    </VList>
                {/await}
            </nav>
        </div>
    </main>
{:else}
    <div class="detail">
        {@render children()}
    </div>
{/if}

<style>
    .detail {
        background-color: lightcyan;
        flex: 1;
    }
    .list {
        background-color: lightyellow;
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }
    .list-item {
        border-bottom: 1px dotted lightgray;
        padding: 0.5rem 0;
    }

    .panel {
        display: flex;
        font-size: x-small;
        justify-content: space-between;
    }
    .selected {
        background-color: yellow;
    }
    footer {
        display: flex;
        justify-content: center;
    }
    main {
        background-color: lightgoldenrodyellow;
        display: flex;
        flex: 1;
        overflow: hidden;
    }
    nav {
        flex: 1;
    }
</style>

Questions

• When filter or search is changed, scroll position should be back to 0
• But when clicking on items, scroll position should be retained
• How to achieve this?