Skip to content

Commit 8a87db7

Browse files
niveshdandyanclaude
andcommitted
fix: add smooth scrolling for readme hash links
Use scrollToAnchor utility for hash link navigation in README content to provide a smoother scrolling experience instead of abrupt native browser behavior. Co-Authored-By: Claude (claude-opus-4-5) <noreply@anthropic.com>
1 parent 5c167df commit 8a87db7

File tree

1 file changed

+9
-1
lines changed

1 file changed

+9
-1
lines changed

app/components/Readme.vue

Lines changed: 9 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. Smooth scrolling for hash links
1215
function handleClick(event: MouseEvent) {
1316
const target = event.target as HTMLElement | undefined
1417
if (!target) return
@@ -47,8 +50,13 @@ function handleClick(event: MouseEvent) {
4750
const href = anchor.getAttribute('href')
4851
if (!href) return
4952
50-
// Let browser handle hash links natively (case is normalized server-side)
53+
// Handle hash links with smooth scrolling (case is normalized server-side)
5154
if (href.startsWith('#')) {
55+
event.preventDefault()
56+
const id = href.slice(1)
57+
if (id) {
58+
scrollToAnchor(id)
59+
}
5260
return
5361
}
5462

0 commit comments

Comments
 (0)