feat: improve scroll-to-top behavior by RYGRIT · Pull Request #1453 · npmx-dev/npmx.dev

RYGRIT · 2026-02-13T02:27:49Z

Fixes #1379

Improves the ScrollToTop component behavior.

Desktop Support: Enabled the button on desktop and fixed the visibility fallback logic for browsers without scroll-state support.
Better UX: Normalized scroll duration (500ms) and added support for prefers-reduced-motion.
Interaction: The auto-scroll animation now cancels immediately upon user interaction (wheel, touch, or click).

Desktop

scroll-to-top.mp4

Mobile

freecompress-1714SVID_20260213_094933_1.mp4

cc @graphieros @MatteoGabriele

vercel · 2026-02-13T02:27:54Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Feb 14, 2026 10:53am
npmx.dev	Ready	Preview, Comment	Feb 14, 2026 10:53am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Feb 14, 2026 10:53am

codecov · 2026-02-13T02:30:05Z

Codecov Report

❌ Patch coverage is 2.08333% with 47 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/composables/useScrollToTop.ts	0.00%	32 Missing and 6 partials ⚠️
app/components/ScrollToTop.client.vue	10.00%	5 Missing and 4 partials ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-02-13T02:30:48Z

📝 Walkthrough

Walkthrough

Adds a new composable useScrollToTop(options) exporting scrollToTop and cancel (default duration 500ms), with eased, frame-driven animation, prefers-reduced-motion handling, interaction-based cancellation and on-unmount cleanup. The ScrollToTop component was refactored to use this composable, introduced isTouchDeviceClient and a shouldShowButton computed, reversed the onScroll guard to prefer CSS scroll-state when available, replaced the local scrollToTop implementation with the hook, updated template v-if and @click bindings, and adjusted classes/visibility logic for CSS and JS fallback paths.

Suggested labels

front

Suggested reviewers

danielroe

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly describes the changeset: enabling ScrollToTop on desktop, normalizing scroll duration to 500ms, adding prefers-reduced-motion support, and implementing interaction-based animation cancellation.
Linked Issues check	✅ Passed	The PR successfully addresses both objectives from issue `#1379`: making the button visible on desktop/touch devices and normalizing smooth scroll timing to 500ms with JavaScript-based animation.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue objectives: the new useScrollToTop composable provides the standardized scroll animation, and ScrollToTop.client.vue modifications integrate it with device detection.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into `main`

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

app/components/ScrollToTop.client.vue (1)

44-44: Consider extracting duplicated class string.

Lines 44 and 64 share nearly identical class lists. Extracting to a computed or constant would reduce duplication and simplify future styling changes.

♻️ Suggested refactor

 const { scrollToTop } = useScrollToTop({ duration: SCROLL_TO_TOP_DURATION })
+
+const buttonClasses = 'fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95'
 
 useEventListener('scroll', onScroll, { passive: true })

Then in the template:

-    class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+    :class="['scroll-to-top-css', buttonClasses]"

-      class="fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+      :class="buttonClasses"

Also applies to: 64-64

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

danielroe

these look like good changes to the scroll composable 👌

my only question is about displaying the button on desktop. it feels like an affordance needed for mobile, but users with a keyboard will have a 'Home' key and an extra button clutters the UI

graphieros · 2026-02-13T09:29:15Z

these look like good changes to the scroll composable 👌

my only question is about displaying the button on desktop. it feels like an affordance needed for mobile, but users with a keyboard will have a 'Home' key and an extra button clutters the UI

Would the button appear on tablets ?

danielroe · 2026-02-13T09:30:27Z

it should probably be gated not by window width but by isTouchDevice
https://github.com/npmx-dev/npmx.dev/blob/8a70d6e124dc3c1560a59c76334ac64867dd07b7/app/utils/responsive.ts

RYGRIT · 2026-02-13T13:26:51Z

it should probably be gated not by window width but by isTouchDevice https://github.com/npmx-dev/npmx.dev/blob/8a70d6e124dc3c1560a59c76334ac64867dd07b7/app/utils/responsive.ts

Good point. I'll switch to using isTouchDevice to avoid cluttering the desktop UI.

'Home' key

Ah, TIL about the Home/End shortcuts! Thanks for the tip.

RYGRIT · 2026-02-13T14:02:20Z

I've already implemented isTouchDevice() to determine if a button is hidden, but I've found that when simulating a mobile device in the browser, I have to refresh the browser for the button to appear.

coderabbitai

Actionable comments posted: 1

coderabbitai · 2026-02-13T14:04:49Z

app/components/ScrollToTop.client.vue

+const isTouchDeviceClient = shallowRef(false)
 const isVisible = shallowRef(false)
 const scrollThreshold = 300
 const { isSupported: supportsScrollStateQueries } = useCssSupports(
  'container-type',
  'scroll-state',
  { ssrValue: false },
 )
+const shouldShowButton = computed(() => isActive.value && isTouchDeviceClient.value)


⚠️ Potential issue | 🟠 Major

Desktop visibility still blocked by touch-only gating.

shouldShowButton requires isTouchDeviceClient, so the button never appears on non-touch desktops. That conflicts with issue #1379’s requirement to show the control on desktop. If the requirement still stands, drop the touch-only gate (or make it configurable). If the requirement has changed, please update the issue/PR description to match.

🛠️ Suggested fix if desktop should be supported

-const isTouchDeviceClient = shallowRef(false) const isVisible = shallowRef(false) @@ -const shouldShowButton = computed(() => isActive.value && isTouchDeviceClient.value) +const shouldShowButton = computed(() => isActive.value) @@ onMounted(() => { - isTouchDeviceClient.value = isTouchDevice() onScroll() })

Also applies to: 34-34

This is ok, requirements changed to only show the button on touch decices

@graphieros Thank you for clarifying! I understand the requirements have shifted to show the button only on touch devices. The current implementation correctly achieves that.

Since issue #1379 is titled "Back-to-top button on desktop" and the PR description mentions "Desktop Support: Enabled the button on desktop", you may want to update both to reflect this new direction—perhaps explaining that after discussion, the button was decided to remain touch-only to avoid cluttering desktop UI (where keyboard shortcuts like Home/End are available).

✏️ Learnings added

Learnt from: graphieros Repo: npmx-dev/npmx.dev PR: 1453 File: app/components/ScrollToTop.client.vue:12-20 Timestamp: 2026-02-13T14:11:12.069Z Learning: For the ScrollToTop button component in app/components/ScrollToTop.client.vue: the button should only be shown on touch devices (gated by `isTouchDevice()`), not on desktop, to avoid cluttering desktop UI where keyboard shortcuts are available.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

danielroe · 2026-02-13T14:50:52Z

looking great!

but one more thought - we might want to update the implementation on the package page as we already have a bottom bar - maybe (on that page) build another button into that bottom bar and hide this one?

RYGRIT · 2026-02-13T15:12:27Z

Yes, I also think they should be merged.

However, this raises another issue: when switching to other languages, the floating buttons at the bottom extend beyond the screen, and the display changes accordingly (for example, the floating button area becomes higher). I mentioned this issue in PR #1284 before. I'm unsure whether the text content should be hidden on small screens. I haven't thought of a better solution at the moment.

Device: iPhone 14 Pro Max - browser (simulated)

OrbisK

FYI: There is https://vueuse.org/core/useScroll

OrbisK · 2026-02-13T17:45:26Z

app/components/ScrollToTop.client.vue

+    class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
    :aria-label="$t('common.scroll_to_top')"
-    @click="scrollToTop"
+    @click="scrollToTop()"


Suggested change

@click="scrollToTop()"

@click="()=>scrollToTop()"

OrbisK · 2026-02-13T17:45:42Z

app/components/ScrollToTop.client.vue

+      class="fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
      :aria-label="$t('common.scroll_to_top')"
-      @click="scrollToTop"
+      @click="scrollToTop()"


Suggested change

@click="scrollToTop()"

@click="()=>scrollToTop()"

OrbisK · 2026-02-13T17:47:43Z

app/composables/useScrollToTop.ts

+    const cleanup = [
+      useEventListener(window, 'wheel', cancel, { passive: true }),
+      useEventListener(window, 'touchstart', cancel, { passive: true }),
+      useEventListener(window, 'mousedown', cancel, { passive: true }),
+    ]


we should not add these inside of scrollTop(). This will lead to a memory leak, becuase the event listerners are not cleaned up after every call.
You should move them to the setup level.

OrbisK · 2026-02-13T17:49:22Z

app/composables/useScrollToTop.ts

+    rafId = requestAnimationFrame(animate)
+  }
+
+  onBeforeUnmount(cancel)


We should prefer the tryOnScopeDispose method from Vueuse. This is because the component might be called in another scope, than the component (for example as a sharedComposable).

danielroe · 2026-02-13T18:47:13Z

However, this raises another issue: when switching to other languages, the floating buttons at the bottom extend beyond the screen, and the display changes accordingly

@RYGRIT maybe we can switch to icon-only for the bottom bar on mobile? and long-press on the button shows what it does?

feat: improve scroll-to-top behavior

aad5b12

vercel bot deployed to Preview – npmx.dev February 13, 2026 02:29 View deployment

RYGRIT marked this pull request as draft February 13, 2026 02:40

RYGRIT marked this pull request as ready for review February 13, 2026 08:25

danielroe reviewed Feb 13, 2026

View reviewed changes

fix: use isTouchDevice methods control scrollToTop button display

8d294df

vercel bot deployed to Preview – npmx.dev February 13, 2026 14:03 View deployment

coderabbitai bot reviewed Feb 13, 2026

View reviewed changes

OrbisK reviewed Feb 13, 2026

View reviewed changes

Merge branch 'main' into feat/scroll-to-top

7eca5d0

vercel bot deployed to Preview – docs.npmx.dev February 14, 2026 10:53 View deployment

vercel bot deployed to Preview – npmx.dev February 14, 2026 10:53 View deployment

Uh oh!

Conversation

RYGRIT commented Feb 13, 2026

Uh oh!

vercel bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Suggested labels

Suggested reviewers

Uh oh!

danielroe left a comment

Choose a reason for hiding this comment

Uh oh!

graphieros commented Feb 13, 2026

Uh oh!

danielroe commented Feb 13, 2026

Uh oh!

RYGRIT commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RYGRIT commented Feb 13, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

graphieros Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

danielroe commented Feb 13, 2026

Uh oh!

RYGRIT commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

OrbisK left a comment

Choose a reason for hiding this comment

Uh oh!

OrbisK Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

OrbisK Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

OrbisK Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OrbisK Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

danielroe commented Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel bot commented Feb 13, 2026 •

edited

Loading

codecov bot commented Feb 13, 2026 •

edited

Loading

coderabbitai bot commented Feb 13, 2026 •

edited

Loading

RYGRIT commented Feb 13, 2026 •

edited

Loading

coderabbitai bot Feb 13, 2026 •

edited

Loading

RYGRIT commented Feb 13, 2026 •

edited

Loading

OrbisK Feb 13, 2026 •

edited

Loading