# History Loading > Scroll up to load older messages with anchor preservation. Demonstrates prepend-history behavior without viewport jumping using @humanspeak/svelte-virtual-chat. **Source:** [https://virtualchat.svelte.page/examples/history-loading](https://virtualchat.svelte.page/examples/history-loading) **Markdown mirror:** [https://virtualchat.svelte.page/examples/history-loading.md](https://virtualchat.svelte.page/examples/history-loading.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: history loading. Scroll up to trigger older message loading while the viewport preserves its visible anchor as messages are prepended above. **Metadata:** tag: `HISTORY` | mode: `prepend · anchored` ### Notes - Scroll near the top and `onNeedHistory` fires, so you can fetch an older batch and prepend it to the messages array — the chat starts with the most recent messages loaded. - As older messages are prepended above, the viewport preserves its visible anchor — the message you were reading stays exactly where it was, with no jump. - Anchor preservation compensates for the height of the inserted batch, so scrollTop is corrected in the same frame the messages land. - Keep scrolling up to page through the full backlog. The scroll-away state means loading history never yanks you back to the bottom. ### Source #### HistoryLoading.svelte Source file: [src/lib/examples/history-loading/demos/HistoryLoading.svelte](https://github.com/humanspeak/svelte-virtual-chat/blob/main/docs/src/lib/examples/history-loading/demos/HistoryLoading.svelte) ```svelte
file · HistoryLoading.svelte messages {messages.length} oldest #{oldestLoadedId} loads {loadCount} {#if isLoadingHistory}● loading history{:else if !hasMoreHistory}○ all history loaded{:else}· scroll up to load more{/if}
msg.id} estimatedMessageHeight={72} followBottomThresholdPx={48} overscan={8} onNeedHistory={loadOlderMessages} onDebugInfo={(info: SvelteVirtualChatDebugInfo) => (debugInfo = info)} containerClass="h-[500px]" viewportClass="h-full" testId="history-chat" > {#snippet renderMessage(message: Message)}
{message.role === 'user' ? 'you' : 'assistant'} {formatTime(message.timestamp)} #{message.id}
{message.content}
{/snippet}
{#if debugInfo}
total · {debugInfo.totalMessages}
in dom · {debugInfo.renderedCount}
measured · {debugInfo.measuredCount}
range · {debugInfo.startIndex}–{debugInfo.endIndex}
height · {Math.round(debugInfo.totalHeight)}px
scroll · {Math.round(debugInfo.scrollTop)}px
{/if}
```