Skip to content

Commit 24613b0

Browse files
niveshdandyanclaude
andcommitted
fix: enable hash link scrolling in README Table of Contents
When clicking on hash links within a package's README (such as Table of Contents links), the URL hash would update but the page wouldn't scroll to the target section. This was because the click handler wasn't processing internal anchor links. The fix intercepts clicks on hash links (href starting with #) and uses the existing scrollToAnchor utility to smoothly scroll to the target section with proper header offset handling. Fixes #1008 Co-Authored-By: Claude (claude-opus-4-5) <noreply@anthropic.com>
1 parent dbb4d73 commit 24613b0

1 file changed

Lines changed: 13 additions & 1 deletion

File tree

app/components/Readme.vue

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script setup lang="ts">
2+
import { scrollToAnchor } from '~/utils/scrollToAnchor'
3+
24
defineProps<{
35
html: string
46
}>()
@@ -9,6 +11,7 @@ const { copy } = useClipboard()
911
// Combined click handler for:
1012
// 1. Intercepting npmjs.com links to route internally
1113
// 2. Copy button functionality for code blocks
14+
// 3. Hash link scrolling for internal README navigation (Table of Contents)
1215
function handleClick(event: MouseEvent) {
1316
const target = event.target as HTMLElement | undefined
1417
if (!target) return
@@ -40,13 +43,22 @@ function handleClick(event: MouseEvent) {
4043
return
4144
}
4245
43-
// Handle npmjs.com link clicks - route internally
46+
// Handle anchor link clicks
4447
const anchor = target.closest('a')
4548
if (!anchor) return
4649
4750
const href = anchor.getAttribute('href')
4851
if (!href) return
4952
53+
// Handle hash links for internal README navigation (e.g., Table of Contents)
54+
if (href.startsWith('#')) {
55+
event.preventDefault()
56+
const id = href.slice(1) // Remove the leading '#'
57+
scrollToAnchor(id)
58+
return
59+
}
60+
61+
// Handle npmjs.com link clicks - route internally
5062
const match = href.match(/^(?:https?:\/\/)?(?:www\.)?npmjs\.(?:com|org)(\/.+)$/)
5163
if (!match || !match[1]) return
5264

0 commit comments

Comments
 (0)