Fix scroll position when navigating back from page w/o ViewTransitions (

#8332)

Co-authored-by: Justin Beaty <[email protected]>
Co-authored-by: Nate Moore <[email protected]>

.changeset/weak-kids-roll.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix scroll position when navigating back from page w/o ViewTransitions

packages/astro/components/ViewTransitions.astro

@@ -30,9 +30,11 @@ const { fallback = 'animate' } = Astro.props as Props;
 	// The History API does not tell you if navigation is forward or back, so
 	// you can figure it using an index. On pushState the index is incremented so you
 	// can use that to determine popstate if going forward or back.
-	let currentHistoryIndex = history.state?.index || 0;
-	if (!history.state && transitionEnabledOnThisPage()) {
-		persistState({ index: currentHistoryIndex, scrollY: 0 });
+	let currentHistoryIndex = 0;
+	if (history.state) {
+		// we reloaded a page with history state (e.g. back button or browser reload)
+		currentHistoryIndex = history.state.index;
+		scrollTo({ left: 0, top: history.state.scrollY });
 	}
 
 	const throttle = (cb: (...args: any[]) => any, delay: number) => {
@@ -352,6 +354,7 @@ const { fallback = 'animate' } = Astro.props as Props;
 				// The current page doesn't haven't View Transitions,
 				// respect that with a full page reload
 				// -- but only for transition managed by us (ev.state is set)
+				history.scrollRestoration && (history.scrollRestoration = "manual")
 				location.reload();
 				return;
 			}

packages/astro/e2e/fixtures/view-transitions/src/pages/long-page.astro

@@ -32,6 +32,8 @@ import Layout from '../components/Layout.astro';
 
 		<div><a id="click-one-again" href="/one">go to 1</a></div>
 		<div><a id="click-scroll-up" href="#longpage">go back up</a></div>
+		<div><a id="click-external" href="/three">leave ViewTransitions</a></div>
+
 		Morbi tristique senectus et netus et. Neque aliquam vestibulum morbi blandit cursus risus. Pharetra pharetra massa massa ultricies mi quis. Sit amet aliquam id diam maecenas ultricies mi eget mauris. Ultrices mi tempus imperdiet nulla malesuada. At consectetur lorem donec massa sapien faucibus et molestie. Non sodales neque sodales ut etiam. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Diam vulputate ut pharetra sit. Felis donec et odio pellentesque diam. Mollis aliquam ut porttitor leo. Vitae nunc sed velit dignissim sodales. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis.
 
 		Aliquet enim tortor at auctor urna nunc id cursus. Bibendum at varius vel pharetra vel turpis nunc eget. Mattis molestie a iaculis at erat. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Nunc congue nisi vitae suscipit. Donec massa sapien faucibus et molestie ac. Nec feugiat nisl pretium fusce. At imperdiet dui accumsan sit amet nulla facilisi. Sed viverra tellus in hac.

packages/astro/e2e/view-transitions.test.js

@@ -502,3 +502,24 @@ test.describe('View Transitions', () => {
 		await downloadPromise;
 	});
 });
+
+test('Scroll position is restored on back navigation from page w/o ViewTransitions', async ({
+	page,
+	astro,
+}) => {
+	// Go to middle of long page
+	await page.goto(astro.resolveUrl('/long-page#click-external'));
+
+	let locator = page.locator('#click-external');
+	await expect(locator).toBeInViewport();
+
+	// Go to a page that has not enabled ViewTransistions
+	await page.click('#click-external');
+	locator = page.locator('#three');
+	await expect(locator).toHaveText('Page 3');
+
+	// Scroll back to long page
+	await page.goBack();
+	locator = page.locator('#click-external');
+	await expect(locator).toBeInViewport();
+});