-> v0.23.1

CHANGELOG.md

@@ -1,5 +1,10 @@
 # sapper changelog
 
+## 0.23.1
+
+* Scroll to deeplink that matches current URL ([#472](https://github.com/sveltejs/sapper/pull/472))
+* Scroll to deeplink on another page ([#341](https://github.com/sveltejs/sapper/issues/341))
+
 ## 0.23.0
 
 * Overhaul internal APIs ([#468](https://github.com/sveltejs/sapper/pull/468))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "description": "Military-grade apps, engineered by Svelte",
   "bin": {
     "sapper": "./sapper"

templates/src/client/app.ts

@@ -106,7 +106,8 @@ export function scroll_state() {
 	};
 }
 
-export function navigate(target: Target, id: number, noscroll = false): Promise<any> {
+export function navigate(target: Target, id: number, noscroll?: boolean, hash?: string): Promise<any> {
+	let scroll: ScrollPosition;
 	if (id) {
 		// popstate or initial navigation
 		cid = id;
@@ -137,13 +138,12 @@ export function navigate(target: Target, id: number, noscroll = false): Promise<
 		if (redirect) {
 			return goto(redirect.location, { replaceState: true });
 		}
-
-		render(data, nullable_depth, scroll_history[id], token);
+		render(data, nullable_depth, scroll_history[id], noscroll, hash, token);
 		if (document.activeElement) document.activeElement.blur();
 	});
 }
 
-function render(data: any, nullable_depth: number, scroll: ScrollPosition, token: {}) {
+function render(data: any, nullable_depth: number, scroll: ScrollPosition, noscroll: boolean, hash: string, token: {}) {
 	if (current_token !== token) return;
 
 	if (root_component) {
@@ -182,8 +182,20 @@ function render(data: any, nullable_depth: number, scroll: ScrollPosition, token
 		});
 	}
 
-	if (scroll) {
-		scrollTo(scroll.x, scroll.y);
+	if (!noscroll) {
+		if (hash) {
+			// scroll is an element id (from a hash), we need to compute y.
+			const deep_linked = document.querySelector(hash);
+			if (deep_linked) {
+				scroll = {
+					x: 0,
+					y: deep_linked.getBoundingClientRect().top
+				};
+			}
+		}
+
+		scroll_history[cid] = scroll;
+		if (scroll) scrollTo(scroll.x, scroll.y);
 	}
 
 	Object.assign(root_props, data);

templates/src/client/start/index.ts

@@ -13,7 +13,7 @@ import {
 	set_cid
 } from '../app';
 import prefetch from '../prefetch/index';
-import { Store } from '../types';
+import { Store, ScrollPosition } from '../types';
 
 export default function start(opts: {
 	target: Node,
@@ -36,16 +36,11 @@ export default function start(opts: {
 	return Promise.resolve().then(() => {
 		const { hash, href } = location;
 
-		const deep_linked = hash && document.getElementById(hash.slice(1));
-		scroll_history[uid] = deep_linked ?
-			{ x: 0, y: deep_linked.getBoundingClientRect().top } :
-			scroll_state();
-
 		history.replaceState({ id: uid }, '', href);
 
 		if (!initial_data.error) {
 			const target = select_route(new URL(location.href));
-			if (target) return navigate(target, uid);
+			if (target) return navigate(target, uid, false, hash);
 		}
 	});
 }
@@ -84,7 +79,7 @@ function handle_click(event: MouseEvent) {
 	const href = String(svg ? (<SVGAElement>a).href.baseVal : a.href);
 
 	if (href === location.href) {
-		event.preventDefault();
+		if (!location.hash) event.preventDefault();
 		return;
 	}
 
@@ -104,7 +99,7 @@ function handle_click(event: MouseEvent) {
 	const target = select_route(url);
 	if (target) {
 		const noscroll = a.hasAttribute('sapper-noscroll');
-		navigate(target, null, noscroll);
+		navigate(target, null, noscroll, url.hash);
 		event.preventDefault();
 		history.pushState({ id: cid }, '', url.href);
 	}

test/apps/scroll/src/routes/another-tall-page.html

@@ -1 +1,2 @@
-<div style="height: 9999px"></div>
+<div style="height: 9999px"></div>
+<p id="bar">element</p>

test/apps/scroll/src/routes/tall-page.html

@@ -1,6 +1,24 @@
+<a href="tall-page#foo">scroll to foo</a>
 <div style="height: 9999px"></div>
 
 <div id="foo">
 	<a href="another-tall-page">link</a>
 	<a href="another-tall-page" sapper-noscroll>link</a>
-</div>
+	{#if barLink}
+		<a href="another-tall-page#bar">link</a>
+	{/if}
+</div>
+
+<script>
+	export default {
+		data() {
+			return {
+				barLink: false
+			};
+		},
+
+		oncreate() {
+			this.set({ barLink: true })
+		}
+	}
+</script>

test/apps/scroll/test.ts

@@ -33,6 +33,24 @@ describe('scroll', function() {
 		assert.ok(scrollY > 0, scrollY);
 	});
 
+	it('scrolls to any deeplink if it was already active', async () => {
+		await page.goto(`${base}/tall-page#foo`);
+		await start();
+
+		let scrollY = await page.evaluate(() => window.scrollY);
+		assert.ok(scrollY > 0, scrollY);
+
+		scrollY = await page.evaluate(() => {
+			window.scrollTo(0, 0)
+			return window.scrollY
+		});
+		assert.ok(scrollY === 0, scrollY);
+
+		await page.click('[href="tall-page#foo"]');
+		scrollY = await page.evaluate(() => window.scrollY);
+		assert.ok(scrollY > 0, scrollY);
+	});
+
 	it('resets scroll when a link is clicked', async () => {
 		await page.goto(`${base}/tall-page#foo`);
 		await start();
@@ -59,4 +77,15 @@ describe('scroll', function() {
 
 		assert.ok(scrollY > 0);
 	});
+
+	it('scrolls into a deeplink on a new page', async () => {
+		await page.goto(`${base}/tall-page#foo`);
+		await start();
+		await prefetchRoutes();
+
+		await page.click('[href="another-tall-page#bar"]');
+		await wait(50);
+		const scrollY = await page.evaluate(() => window.scrollY);
+		assert.ok(scrollY > 0);
+	});
 });