RSK World - Smooth Scroll Navigation | Scroll Spy, Active Section, Keyboard & Touch | RSK World

Smooth Scroll Scroll Spy Theme & Progress Keyboard & Search Vanilla JS

Smooth Scroll Navigation is a modern single-page demo with smooth scrolling, scroll spy (active section highlighting), and rich UX. Includes: theme toggle (light/dark) with localStorage; circular and reading progress indicators; section search with navigate-to-result; keyboard shortcuts (arrows, Home, End, Space, /, T, ?); touch swipe for section navigation; shortcuts modal (press ?); CSS scroll snap demo (scroll-snap.html); horizontal scrolling demo (horizontal.html); back-to-top button; Intersection Observer scroll animations; reduced motion support. Files: index.html, scroll-snap.html, horizontal.html, code-showcase.html, styles.css, script.js. By rskworld.in.

If you find this Smooth Scroll Navigation project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Smooth Scroll Demo

Smooth Scroll & Scroll Spy

script.js: initSmoothScroll() for anchor links; initScrollSpy() highlights active nav link from scroll position. smoothScrollTo(element, duration) with easeInOutQuad. Navbar offset (70px) so sections align under fixed nav. Sections: home, about, services, portfolio, contact.

initSmoothScroll() – intercepts a[href^="#"] and scrolls to target with navbar offset; native scroll-behavior: smooth in CSS.
initScrollSpy() – on scroll, finds section in view (pageYOffset vs sectionTop) and sets .nav-link.active on the matching link.
smoothScrollTo(element, duration) – requestAnimationFrame animation with easeInOutQuad for custom smooth scroll when needed.
Scroll progress – circular conic-gradient indicator and reading bar; both update on scroll (debounced).
Back to top button – visible after 500px; smooth scroll to top on click.

Project Structure & Files

Main: index.html (sections, nav, search, theme toggle, progress, shortcuts modal). scroll-snap.html (CSS scroll snap, dot nav). horizontal.html (horizontal slides, arrows, dots). code-showcase.html (syntax-highlighted code viewer). styles.css (variables, dark theme, responsive). script.js (all init functions). No build step.

index.html – Home, About, Services, Portfolio, Contact; nav links to Snap Demo and Horizontal; search box, theme toggle, hamburger.
styles.css – :root and [data-theme="dark"] variables; scroll progress, search, shortcuts modal, animations; prefers-reduced-motion support.
script.js – initThemeToggle, initScrollProgress, initSearch, initKeyboardNavigation, initTouchSwipe, initScrollSpy, initScrollAnimations, initBackToTop, initMobileMenu, initSmoothScroll, initShortcutsModal, initKeyboardHint.
No build step – open index.html or serve the folder; works in all modern browsers. README.md with features and keyboard shortcuts.

Theme Toggle & Progress

initThemeToggle(): theme in localStorage (key "theme"); data-theme on documentElement; updateThemeIcon() switches moon/sun. initScrollProgress(): scroll percent drives --scroll-percent (circular) and reading bar width. Debounced scroll handler (10ms).

Theme: Light/Dark with localStorage persistence; icon toggles between fa-moon and fa-sun; notification on change.
Circular progress: conic-gradient with --scroll-percent; data-percent for label; top-right fixed.
Reading progress bar: fixed top, gradient fill, width 0–100% by scroll; z-index above content.
Reduced motion: @media (prefers-reduced-motion: reduce) in CSS disables smooth scroll and shortens animations.

Search & Keyboard Navigation

initSearch(): search box expandable; input searches section headings and content; results list with click-to-scroll. initKeyboardNavigation(): ArrowUp/Down, Home, End, Space, / (focus search), T (theme), ? (shortcuts modal), Escape (close modals). Skips when focus in input/textarea.

Search: min 2 chars; matches section id and content; displaySearchResults() with icons; click result calls smoothScrollTo() and closes search.
Keyboard: sections from .section; current index from scroll; smoothScrollTo(next/prev); / focuses search; ? shows shortcuts modal.
initShortcutsModal(): modal lists all shortcuts; close on button or backdrop; closeAllModals() on Escape.
Keyboard hint: "Press ? for shortcuts" appears after 2s, hides after 10s.

Touch Swipe & Scroll Animations

initTouchSwipe(): touchstart/touchend Y; min swipe 50px; swipe up = next section, down = prev; smoothScrollTo(sections[index]). initScrollAnimations(): IntersectionObserver on .animate-on-scroll; threshold 0.1, rootMargin -50px; adds .visible when in view.

Touch: passive listeners; handleSwipe() finds current section from pageYOffset and moves to next/prev.
Scroll animations: observer.observe() on .animate-on-scroll; .visible triggers opacity and translateY transition.
Home section: .animate-fade-up with delay-1, delay-2; parallax on .home-section .content via scroll offset.

What You Get

Static HTML/CSS/JS: index.html, scroll-snap.html, horizontal.html, code-showcase.html, styles.css, script.js, README.md. No build step. Open index.html or serve folder. Technologies: HTML5, CSS3, Vanilla JS, Intersection Observer, scroll-snap. © 2026 RSK World.

Complete source – index.html (main demo), scroll-snap.html, horizontal.html, code-showcase.html, styles.css, script.js.
No build step – open any HTML in browser or serve the folder; no npm or bundler required.
README.md – features, keyboard shortcuts, file structure, demo pages, customization (colors, sections, offset).
Technologies: HTML5, CSS3, Vanilla JS – standard stack; works in Chrome, Firefox, Safari, Edge. © 2026 RSK World.

Usage

Open index.html for main demo. Click nav links for smooth scroll; scroll to see active link highlight. Press T for theme, / for search, ? for shortcuts. Use arrows or swipe on mobile. Open scroll-snap.html for full-page snap; horizontal.html for horizontal slides.

index.html – full vertical scroll with scroll spy, search, theme, progress, back-to-top, keyboard and touch.
scroll-snap.html – body scroll-snap-type: y mandatory; sections snap; dot indicators and page counter.
horizontal.html – flex container, scroll-snap-type: x mandatory; arrows, dots, slide counter; arrow keys and theme.
Author: RSK World | rskworld.in – more UI/UX demos and source code.

Project Features

Smooth scrolling and scroll spy; theme toggle (light/dark) with localStorage; scroll progress (circular + bar); section search; keyboard navigation (arrows, Home, End, Space, /, T, ?); touch swipe; shortcuts modal; back to top; scroll animations (Intersection Observer); scroll snap and horizontal demos; reduced motion. All vanilla JS.

Smooth scroll and scroll spy – nav links scroll to sections with offset; active link updates from scroll position.
Theme, progress, search, keyboard, touch – full UX layer without frameworks.
Multiple demos – main vertical, scroll snap, horizontal; code-showcase for viewing source with line numbers.
Vanilla JS, responsive, no frameworks – minimal dependencies; mobile hamburger and swipe support.

Credits & Acknowledgments

Smooth Scroll Navigation by RSK World. Smooth scrolling, scroll spy, theme toggle, keyboard and touch navigation for learning front-end and vanilla JS.

Smooth Scroll Navigation – scroll spy, active section, theme toggle, search, keyboard shortcuts, touch swipe, scroll snap, horizontal scroll. Free for learning and integration.
RSK World – Project creator and educational platform for front-end demos and free source code.
Author: Molla Samser (Founder - RSK World). Website: https://rskworld.in. Email: help@rskworld.in | Phone: +91 93305 39277. Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Third-party credits: Font Awesome – Icons.
© 2026 RSK World. All rights reserved. Smooth Scroll Navigation is free for personal and educational use.

Support & Contact

For Smooth Scroll Navigation customization or integration help, please contact us.

Email: help@rskworld.in – for Smooth Scroll customization, integration, or front-end questions.
Phone: +91 93305 39277 – support and custom navigation requirements.
Website: RSKWORLD.in – more UI/UX projects and programming resources by RSK World.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Author: Molla Samser (Founder, RSK World) – creator of Smooth Scroll Navigation and other front-end projects.
Smooth Scroll Navigation – README with features, shortcuts, and file structure in the download.
Technical Support – help with scroll spy, theme, or keyboard/touch integration.
UI Requests Welcome – suggest new scroll or navigation features for future demos.