skills.rest
deomiarn
deomiarnCOMMUNITY
Explore all skills by this author →
GitHub

smooth-scroll

Implement smooth scrolling for same-page anchor links in router-based web applications.

Updated Nov 18, 2025
Search Tags:#a11y#layout#ux#anchor#scroll
One-click install
npx skills add https://github.com/deomiarn/website-template --skill smooth-scroll
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: smooth-scroll
Source: https://github.com/deomiarn/website-template/tree/main/.claude/skills/smooth-scroll
Command: npx skills add https://github.com/deomiarn/website-template --skill smooth-scroll

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Provides smooth scrolling for on-page anchors without affecting full-page navigations, improving user experience on long pages.

Core Features & Use Cases

  • Anchor Smooth Scroll: Smoothly scrolls to in-page anchors (<a href="#section">) while page transitions stay instantaneous.
  • Layout Integration: Implemented once in the locale layout for consistent behavior.
  • Accessibility Respect: Respects reduced motion preferences.

Quick Start

Add the SmoothScroll component to your locale layout and remove any global scroll-behavior: smooth to avoid conflicts.

Frequently Asked Questions about smooth-scroll

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement smooth scrolling for anchor links without affecting page navigation?▼

Smooth scrolling for anchor links uses the scrollIntoView API with smooth behavior, triggered only on same-page anchors (href starting with '#'). Integrate a SmoothScroll component into your layout and remove any global scroll-behavior: smooth to avoid conflicts with router-based page transitions, which remain instant.

Does smooth scrolling work with reduced motion preferences?▼

Yes, smooth scroll implementations respect the prefers-reduced-motion media query. When a user has reduced motion enabled, scrolling behavior switches to instant jumps instead of animations, ensuring accessibility compliance.

Can I use smooth scrolling in a router-based web application?▼

Yes, smooth scrolling works with router-based navigation by applying it only to in-page anchors while full-page transitions remain instantaneous. Add the SmoothScroll component once in your locale layout for consistent behavior across all routes.

What's the difference between smooth scrolling and setting scroll-behavior: smooth globally?▼

Global scroll-behavior: smooth affects all navigation, causing delays on page transitions. Targeted smooth scrolling applies only to same-page anchor links while preserving instant page loads during routing, improving perceived performance.

How do I ensure smooth scrolling only applies to anchor links and not other navigation?▼

The implementation checks if anchor href starts with '#' before applying smooth scroll behavior. Non-anchor navigations and external links retain default behavior, so only in-page anchors trigger smooth scrollIntoView animations.

Related Skills

Explore More Design & Creative Skills→
runkidsrunkids
11

web-quality-audit

Audit web pages for performance, accessibility, SEO, and best practices.

Community
Basic
daffy0208daffy0208
34

product-analyst

Track user metrics and perform cohort analysis to inform product decisions.

Community
Basic
whawkinsivwhawkinsiv
232

motion-polish

Add purposeful CSS and JavaScript animations to interfaces with reduced-motion support.

Community
Intermediate
mgd34msumgd34msu
4

view-transitions

Implement animated view transitions in SPAs and MPAs using the View Transitions API.

Community
Intermediate