diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index f001fee6aa..d116dd8ff4 100644
--- a/site/content/docs/01-component-format.md
+++ b/site/content/docs/01-component-format.md
@@ -24,7 +24,7 @@ All three sections — script, styles and markup — are optional.
 
 A `<script>` block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. There are four additional rules:
 
-#### 1. `export` creates a component prop
+##### 1. `export` creates a component prop
 
 ---
 
@@ -48,7 +48,7 @@ Svelte uses the `export` keyword to mark a variable declaration as a *property*
 </script>
 ```
 
-#### 2. Assignments are 'reactive'
+##### 2. Assignments are 'reactive'
 
 ---
 
@@ -68,7 +68,7 @@ Update expressions (`count += 1`) and property assignments (`obj.x = y`) have th
 </script>
 ```
 
-#### 3. `$:` marks a statement as reactive
+##### 3. `$:` marks a statement as reactive
 
 ---
 
@@ -104,7 +104,7 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve
 </script>
 ```
 
-#### 4. Prefix stores with `$` to access their values
+##### 4. Prefix stores with `$` to access their values
 
 ---
 
@@ -190,4 +190,4 @@ To apply styles to a selector globally, use the `:global(...)` modifier.
 		color: goldenrod;
 	}
 </style>
-```
\ No newline at end of file
+```
diff --git a/site/src/routes/docs/_sections.js b/site/src/routes/docs/_sections.js
index a465851f86..fff450dee5 100644
--- a/site/src/routes/docs/_sections.js
+++ b/site/src/routes/docs/_sections.js
@@ -99,39 +99,35 @@ export default function() {
 			const seen = new Set();
 
 			renderer.heading = (text, level, rawtext) => {
-				if (level <= 4) {
-					const slug = rawtext
-						.toLowerCase()
-						.replace(/[^a-zA-Z0-9]+/g, '-')
-						.replace(/^-/, '')
-						.replace(/-$/, '');
-
-					if (seen.has(slug)) throw new Error(`Duplicate slug ${slug}`);
-					seen.add(slug);
-
-					if (level === 3 || level === 4) {
-						const title = unescape(
-							text
-								.replace(/<\/?code>/g, '')
-								.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
-									if ($3) return `.${$1}(...)`;
-									if ($2) return `.${$1}()`;
-									return `.${$1}`;
-								})
-						);
-
-						subsections.push({ slug, title, level });
-					}
-
-					return `
-						<h${level}>
-							<span id="${slug}" class="offset-anchor"></span>
-							<a href="docs#${slug}" class="anchor" aria-hidden="true"></a>
-							${text}
-						</h${level}>`;
+				const slug = rawtext
+					.toLowerCase()
+					.replace(/[^a-zA-Z0-9]+/g, '-')
+					.replace(/^-/, '')
+					.replace(/-$/, '');
+
+				if (seen.has(slug)) throw new Error(`Duplicate slug ${slug}`);
+				seen.add(slug);
+
+				if (level === 3 || level === 4) {
+					const title = unescape(
+						text
+							.replace(/<\/?code>/g, '')
+							.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
+								if ($3) return `.${$1}(...)`;
+								if ($2) return `.${$1}()`;
+								return `.${$1}`;
+							})
+					);
+
+					subsections.push({ slug, title, level });
 				}
 
-				return `<h${level}>${text}</h${level}>`;
+				return `
+					<h${level}>
+						<span id="${slug}" class="offset-anchor" ${level > 4 ? 'data-scrollignore' : ''}></span>
+						<a href="docs#${slug}" class="anchor" aria-hidden="true"></a>
+						${text}
+					</h${level}>`;
 			};
 
 			blockTypes.forEach(type => {
diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte
index d7055787ff..1f95b24314 100644
--- a/site/src/routes/docs/index.svelte
+++ b/site/src/routes/docs/index.svelte
@@ -18,7 +18,8 @@
 	let show_contents = false;
 
 	onMount(() => {
-		const anchors = container.querySelectorAll('[id]');
+		// don't update `active_section` for headings above level 4, see _sections.js
+		const anchors = container.querySelectorAll('[id]:not([data-scrollignore])');
 
 		let positions;
 
@@ -244,12 +245,15 @@
 	@media (min-width: 768px) {
 		.content :global(h2):hover :global(.anchor),
 		.content :global(h3):hover :global(.anchor),
-		.content :global(h4):hover :global(.anchor) {
+		.content :global(h4):hover :global(.anchor),
+		.content :global(h5):hover :global(.anchor),
+		.content :global(h6):hover :global(.anchor) {
 			opacity: 1;
 		}
 
-		.content :global(h4):hover :global(.anchor) {
-			top: 0.4em;
+		.content :global(h5) :global(.anchor),
+		.content :global(h6) :global(.anchor) {
+			top: 0.5em;
 		}
 	}
 
@@ -264,6 +268,7 @@
 		line-height: 1;
 	}
 
+	.content :global(h4),
 	.content :global(h4 > code) {
 		font-weight: 700;
 		font-size: var(--h4);