lightweight-router 1.0.9 → 1.0.12

package/README.md

@@ -13,7 +13,7 @@ PageFlick is a minimal lightweight client-side router with intelligent prefetchi
 - 🎨 Built-in loading animations
 - 🕰️ Based on History API so you can use native browser navigation
 - 🤖 Automatic title change
-
+- 📜 **Scroll routes** — multi-section landing pages: full-height `<route scroll>` blocks, smooth in-page navigation, and URL bar sync while scrolling
 
 ## Installation
 
@@ -35,14 +35,15 @@ Example:
 ```javascript
 import { startRouter } from "lightweight-router";
 
-startRouter()
+startRouter();
 
 //or with your callback
 
 startRouter({
-  onRouteChange: currentRoute => {
-    console.log("Route changed:", currentRoute);
+  onRouteChange: path => {
+    console.log("Route changed:", path);
   },
+  debug: true, // optional: log router activity to the console
 });
 ```
 
@@ -74,7 +75,8 @@ Initializes the router with the given options.
 #### Parameters
 
 - `options` (Object): Configuration options for the router.
-  - `onRouteChange` (Function): Callback function to be called when the route changes.
+  - `onRouteChange` (Function): Called with the **current path string** when the route changes (including when the URL is updated while scrolling through scroll routes).
+  - `debug` (Boolean): When `true`, logs navigation and prefetch activity to the console.
 
 ## Examples
 
@@ -86,19 +88,20 @@ Your website content
   import { startRouter } from "./router.js";
 
   startRouter({
-    onRouteChange: currentRoute => {
-      console.log("Route changed:", currentRoute);
+    onRouteChange: path => {
+      console.log("Route changed:", path);
     },
   });
 </script>
 ```
 
+See **`src/index.html`** in this repo for a full **scroll routes** landing example (`<route scroll>` sections and nav).
+
 ## Prefetching
 
 By default, links are prefetched when they get in the user's screen using an `IntersectionObserver`. This ensures that the content is loaded in the background before the user clicks on the link, providing a smoother navigation experience.
 This behaviour is automatically disabled if the user has data saving preferences.
 
-
 If you have too many links at once or too many requests, you can add the `prefetch="onHover"` attribute to your links or some of them (usually links to huge pages that are not often visited):
 
 ```html
@@ -110,6 +113,31 @@ The minified version was created with uglify-js, clean.css and then ultra minifi
 The size of the gzipped version was calculated with: https://dafrok.github.io/gzip-size-online/
 It's worth to note that nonetheless Terser give better results than uglify-js. The final uglify version packed by packjs.com was the smallest.
 
+## Scroll routes (landing sections)
+
+Use this for a **single HTML page** that behaves like several “routes”: tall sections that share one document, each with its own pathname. Mark sections with **`scroll`** on `<route>` and a **`path`** that matches the URL you want in the address bar.
+
+```html
+<router>
+  <route scroll path="/">
+    <!-- hero -->
+  </route>
+  <route scroll path="/features">
+    <!-- features -->
+  </route>
+  <route scroll path="/pricing.html">
+    <!-- pricing -->
+  </route>
+</router>
+```
+
+**Behavior**
+
+- When the current URL matches a **`route[scroll]`** `path`, all scroll routes are shown (non-scroll routes inside `<router>` are hidden), and the matching section is scrolled into view. Internal links to another scroll route use **smooth** scrolling.
+- While the user scrolls, an **IntersectionObserver** picks the most visible section and updates the URL with **`history.replaceState`** (and fires `onRouteChange`) so the address bar tracks the section in view.
+- Empty scroll routes still **fetch** HTML from the server like normal routes (prefetching applies the same way).
+- **Deep links**: opening `/features` directly only works if your static server **falls back to this HTML** for unknown paths (for example `npx serve . --single`).
+
 ## Browser Support
 
 The router is intended for modern browsers. Required features:
@@ -136,11 +164,11 @@ This allows only the changing part of the document to be updated, improving perf
 Once you configured your server to respond to this type of request, wrap the part of your document that changes in a `router` tag. Inside the `router` tag, render the current initial route inside a `route` tag like this:
 
 ```html
-<-- Header menu and parts that don't change -->
+<!-- Header menu and parts that don't change -->
 <router>
   <route path="/">home content</route>
 </router>
-<-- footer etc.. -->
+<!-- footer etc.. -->
 ```
 
 You can also prerender most visited routes by rendering them inside the `router` tag in their appropriate `route` tags for faster loading times:
@@ -159,20 +187,15 @@ Right now errors are shown without styling as the content of the page.
 If you like to use Preact and Deno for easy server config consider using the server side router present in [Singularity](https://github.com/andreafuturi/Singularity/) framework.
 It does exactly what we're talking about automatically by returning full html renders on normal request (sorrounded by an Index.jsx) and returing only partial route html when route is requested from inside the page (with onlyRoute param).
 
-
 ## Performance Tips
+
 - Implement server-side partial responses for better bandwidth usage
 - Consider using the `prefetch="onHover"` attribute for less important links
 
 ## Future Development
+
 - Delay router intialization on first link hover for better performances?
 - Implement html streaming for faster page load
 - Cooler Error handling
 - Disable caching on certain links/routes (that needs to be always up to date)
 - Cache limiting
-
-
-
-
-
-

package/dist/router.min.js

@@ -1 +1 @@
-(()=>{let l={},n=!1,c=(...e)=>n&&console.log("🚦 Router:",...e),o=async()=>{c("Navigation triggered to:",globalThis.location.pathname),document.body.classList.add("loading");var e=globalThis.location.pathname.replace(/\/$/,""),t=document.querySelector("router");let r=t.querySelector(`route[path="${e}"]`);if(r||(c("Creating new route element for:",e),(r=document.createElement("route")).setAttribute("path",e),t.appendChild(r)),!r.innerHTML){c("Fetching content for:",globalThis.location.href);let e=l[globalThis.location.href];e||(e=await u(globalThis.location.href),l[globalThis.location.href]=e);var n,o=(new DOMParser).parseFromString(e,"text/html"),a=o.querySelector("title"),a=(a&&(c("Updating page title to:",a.textContent),document.title=a.textContent),r.innerHTML=o.body.innerHTML,Array.from(r.querySelectorAll("script")));c("Executing",a.length,"scripts from fetched content");for(n of a){var i=document.createElement("script");n.src?i.src=n.src:i.textContent=n.textContent,n.parentNode.replaceChild(i,n)}}t.querySelectorAll("route").forEach(e=>e.style.display="none"),r.style.display="contents",document.body.classList.remove("loading"),window.scrollTo(0,0),d&&d(e),c("Route change completed")},a=async e=>{l[e.href]||(c("Prefetching content for:",e.href),l[e.href]=await u(e.href))},i=(e,r)=>{c("🔍 Intersection Observer triggered for",e.length,"entries"),e.forEach(e=>{var t=e.target;c(`🎯 Link ${t.href} intersection:`,{isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,alreadyCached:!!l[t.href]}),e.isIntersecting&&(l[t.href]?c("📦 Content already cached for:",t.href):(a(t),c("👁️ Unobserving link after prefetch initiated:",t.href),r.unobserve(t)))})},s=e=>{var t=e.target.closest("A");t&&t.href&&h(t.href)&&t.origin===location.origin?(c("Internal link clicked:",t.href),e.preventDefault(),globalThis.history.pushState(null,null,t.href),globalThis.dispatchEvent(new Event("popstate"))):c("Invalid link click:",t?.href)};function h(e){if(!e||e.startsWith("#")||e.startsWith("javascript:"))return!1;if(e.startsWith("/"))return!0;try{var t=new URL(e,window.location.origin),r=new URL(window.location.href);return r.hostname.replace(/^www\./,"")!==t.hostname.replace(/^www\./,"")?!1:r.pathname!==t.pathname||!t.hash}catch{return!1}}let d,u=async e=>{e=await t(e);return e.ok?e.text():"Couldn't fetch the route - HTTP error! status: "+e.status},t=async e=>{if(!f){var t=await fetch(e,{method:"POST",body:"onlyRoute"});if(t.ok)return t}return fetch(e)},f=!1,e=(e={})=>{var{onRouteChange:t,debug:r}=e,e=(n=r,c("Router starting...",e),t&&(r=t,d=r),document.createElement("style")),t=(e.textContent=".loading{animation:pulse 1s infinite alternate}@keyframes pulse{from{opacity:.6}to{opacity:.1}}route{content-visibility:auto}",document.head.appendChild(e),document.querySelector("router")),r=globalThis.location.pathname,r=(t||(c("Creating new router element"),t=document.createElement("router"),(e=document.createElement("route")).setAttribute("path",r),e.innerHTML=document.body.innerHTML,t.appendChild(e),document.body.innerHTML="",document.body.appendChild(t),f=!0),globalThis.addEventListener("popstate",o),document.addEventListener("click",s),document.body.addEventListener("mouseover",e=>{"A"===e.target.tagName&&"onHover"===e.target.getAttribute("prefetch")&&(async e=>{e=e.target;!l[e.href]&&h(e.href)&&await a(e)})(e)}),new IntersectionObserver(i,{root:null,threshold:.5}));c("🎭 Created Intersection Observer with config:",{root:"viewport",threshold:.5}),(r=>{let n=navigator.connection&&navigator.connection.saveData;var e=document.querySelectorAll("a");c("🔄 Starting link observation...",{totalLinks:e.length,saveDataMode:n}),e.forEach(e=>{var t="onHover"!==e.getAttribute("prefetch")&&!n&&h(e.href);c("🔗 Link evaluation:",{href:e.href,prefetchAttr:e.getAttribute("prefetch"),isInternal:h(e.href),willObserve:t}),t&&(r.observe(e),c("👀 Now observing link:",e.href))})})(r)};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>e()):e()})();
+(()=>{let c={},o=!1,s=(...e)=>o&&console.log("🚦 Router:",...e),h="auto",t=null,u=0,n=e=>(e??"").replace(/\/$/,""),d=(e,t)=>{var r,o=n(t);for(r of e.querySelectorAll("route[scroll]"))if(n(r.getAttribute("path"))===o)return r;return null},f=()=>{t?.disconnect(),t=null},g=e=>{f();e=[...e.querySelectorAll("route[scroll]")];e.length&&(t=new IntersectionObserver(e=>{var t,r;Date.now()<u||(e=e.filter(e=>e.isIntersecting)).length&&(e.sort((e,t)=>t.intersectionRatio-e.intersectionRatio),e=e[0].target.getAttribute("path"))&&(t=n(e))!==n(globalThis.location.pathname)&&((r=new URL(globalThis.location.href)).pathname=e.startsWith("/")?e:"/"+e,globalThis.history.replaceState(null,"",r.pathname+r.search+r.hash),s("📍 Scroll URL sync:",t),y)&&y(t)},{root:null,rootMargin:"-38% 0px -38% 0px",threshold:[0,.1,.25,.5,.75,1]}),e.forEach(e=>t.observe(e)))},a=async()=>{s("Navigation triggered to:",globalThis.location.pathname),document.body.classList.add("loading");var e=globalThis.location.pathname.replace(/\/$/,"");let t=document.querySelector("router"),r=t.querySelector(`route[path="${e}"]`);if(r||(s("Creating new route element for:",e),(r=document.createElement("route")).setAttribute("path",e),t.appendChild(r)),!r.innerHTML){s("Fetching content for:",globalThis.location.href);let e=c[globalThis.location.href];e||(e=await v(globalThis.location.href),c[globalThis.location.href]=e);var o,n=(new DOMParser).parseFromString(e,"text/html"),a=n.querySelector("title"),a=(a&&(s("Updating page title to:",a.textContent),document.title=a.textContent),r.innerHTML=n.body.innerHTML,Array.from(r.querySelectorAll("script")));s("Executing",a.length,"scripts from fetched content");for(o of a){var l=document.createElement("script");o.src?l.src=o.src:l.textContent=o.textContent,o.parentNode.replaceChild(l,o)}}n=[...t.querySelectorAll("route[scroll]")],a=[...t.querySelectorAll("route:not([scroll])")];let i=d(t,e);if(Boolean(i)){n.forEach(e=>{e.style.display=""}),a.forEach(e=>{e.style.display="none"});let e=h;h="auto","smooth"===e&&(u=Date.now()+550),requestAnimationFrame(()=>{i.scrollIntoView({behavior:e,block:"start"}),requestAnimationFrame(()=>g(t))})}else f(),n.forEach(e=>{e.style.display="none"}),t.querySelectorAll("route").forEach(e=>e.style.display="none"),r.style.display="contents",window.scrollTo(0,0);document.body.classList.remove("loading"),y&&y(e),s("Route change completed")},l=async e=>{c[e.href]||(s("Prefetching content for:",e.href),c[e.href]=await v(e.href))},i=(e,r)=>{s("🔍 Intersection Observer triggered for",e.length,"entries"),e.forEach(e=>{var t=e.target;s(`🎯 Link ${t.href} intersection:`,{isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,alreadyCached:!!c[t.href]}),e.isIntersecting&&(c[t.href]?s("📦 Content already cached for:",t.href):(l(t),s("👁️ Unobserving link after prefetch initiated:",t.href),r.unobserve(t)))})},p=e=>{var t,r,o=e.target.closest("A");o&&o.href&&m(o.href)&&o.origin===location.origin?(t=document.querySelector("router"),r=new URL(o.href).pathname.replace(/\/$/,""),t&&d(t,r)?(s("🔗 Scroll-route link → smooth scroll:",o.href),e.preventDefault(),h="smooth"):(s("Internal link clicked:",o.href),e.preventDefault()),globalThis.history.pushState(null,null,o.href),globalThis.dispatchEvent(new Event("popstate"))):s("Invalid link click:",o?.href)};function m(e){if(!e||e.startsWith("#")||e.startsWith("javascript:"))return!1;if(e.startsWith("/"))return!0;try{var t=new URL(e,window.location.origin),r=new URL(window.location.href);return r.hostname.replace(/^www\./,"")!==t.hostname.replace(/^www\./,"")?!1:r.pathname!==t.pathname||!t.hash}catch{return!1}}let y,v=async e=>{e=await r(e);return e.ok?e.text():"Couldn't fetch the route - HTTP error! status: "+e.status},r=async e=>{if(!b){var t=await fetch(e,{method:"POST",body:"onlyRoute"});if(t.ok)return t}return fetch(e)},b=!1,e=(e={})=>{var{onRouteChange:t,debug:r}=e,e=(o=r,s("Router starting...",e),t&&(r=t,y=r),document.createElement("style")),t=(e.textContent=".loading{animation:pulse 1s infinite alternate}@keyframes pulse{from{opacity:.6}to{opacity:.1}}route{content-visibility:auto}",document.head.appendChild(e),document.querySelector("router")),r=globalThis.location.pathname,r=(t||(s("Creating new router element"),t=document.createElement("router"),(e=document.createElement("route")).setAttribute("path",r),e.innerHTML=document.body.innerHTML,t.appendChild(e),document.body.innerHTML="",document.body.appendChild(t),b=!0),globalThis.addEventListener("popstate",a),document.addEventListener("click",p),document.body.addEventListener("mouseover",e=>{"A"===e.target.tagName&&"onHover"===e.target.getAttribute("prefetch")&&(async e=>{e=e.target;!c[e.href]&&m(e.href)&&await l(e)})(e)}),new IntersectionObserver(i,{root:null,threshold:.5}));s("🎭 Created Intersection Observer with config:",{root:"viewport",threshold:.5}),(r=>{let o=navigator.connection&&navigator.connection.saveData;var e=document.querySelectorAll("a");s("🔄 Starting link observation...",{totalLinks:e.length,saveDataMode:o}),e.forEach(e=>{var t="onHover"!==e.getAttribute("prefetch")&&!o&&m(e.href);s("🔗 Link evaluation:",{href:e.href,prefetchAttr:e.getAttribute("prefetch"),isInternal:m(e.href),willObserve:t}),t&&(r.observe(e),s("👀 Now observing link:",e.href))})})(r),a()};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>e()):e()})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightweight-router",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "main": "src/router.js",
   "scripts": {
     "dev": "npx http-server src -o",

package/src/blog.html

@@ -0,0 +1,24 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Router manual test Blog</title>
+  </head>
+  <body style="background-color: bisque">
+    <menu class="flex m-0 p-0"></menu>
+      <a prefetch="onHover" href="/">Home</a><a href="/about.html">About</a><a href="/admin" prefetch="onHover">Admin</a
+      ><a href="/irmfirmiror" prefetch="onHover">404</a> <a href="https://andreafuturi.com" prefetch="onHover">Google Test</a>
+    </menu>
+    BLOG
+    <script type="module">
+      import { startRouter } from "./router.js";
+      // Initialize the router with a simple onRouteChange callback to test functionality
+      startRouter({
+        onRouteChange: currentRoute => {
+          console.log("Route changed:", currentRoute);
+          currentRoute.classList.add("fade-in"); // Example: simple CSS class for animation (define it in CSS if needed)
+        },
+      });
+    </script>
+  </body>
+</html>

package/src/home.html

@@ -0,0 +1,25 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Router manual test Index</title>
+  </head>
+  <body>
+    <menu class="flex m-0 p-0"></menu>
+      <a prefetch="onHover" href="/home.html">Home</a><a preFetch="onHover" href="/about.html">About</a><a href="/admin" prefetch="onHover">Admin</a
+      ><a href="/irmfirmiror" prefetch="onHover">404</a> <a href="https://andreafuturi.com" prefetch="onHover">Google Test</a>
+      <a href="/">Landingpage</a>
+    </menu>
+    HOME
+    <script type="module">
+      import { startRouter } from "./router.js";
+      // Initialize the router with a simple onRouteChange callback to test functionality
+      startRouter({
+        onRouteChange: currentRoute => {
+          console.log("Route changed:", currentRoute);
+          document.querySelector(`route[path='${currentRoute}']`).classList.add("fade-in"); // Example: simple CSS class for animation (define it in CSS if needed)
+        },
+      });
+    </script>
+  </body>
+</html>

package/src/index.html

@@ -1,22 +1,175 @@
+<!doctype html>
+<!-- Serve this file so the URL path is /landingpage.html (e.g. npx serve src). If your path is /src/landingpage.html, update route path="/landingpage.html" and the Hero nav href to match. -->
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Router manual test Index</title>
+    <title>Scroll routes — landing demo</title>
+    <style>
+      :root {
+        --bg: #0f1419;
+        --surface: #1a2332;
+        --text: #e8eef5;
+        --muted: #8b9cb3;
+        --accent: #3dd6c3;
+        --nav-h: 3.25rem;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        font-family: system-ui, sans-serif;
+        background: var(--bg);
+        color: var(--text);
+        line-height: 1.5;
+      }
+
+      .site-nav {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.5rem 1rem;
+        min-height: var(--nav-h);
+        padding: 0.5rem 1rem;
+        background: color-mix(in srgb, var(--bg) 92%, transparent);
+        backdrop-filter: blur(8px);
+        border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
+      }
+
+      .site-nav a {
+        color: var(--accent);
+        text-decoration: none;
+        font-weight: 600;
+        font-size: 0.9rem;
+      }
+
+      .site-nav a:hover,
+      .site-nav a:focus-visible {
+        text-decoration: underline;
+        outline: none;
+      }
+
+      .site-nav .label {
+        color: var(--muted);
+        font-size: 0.75rem;
+        margin-right: 0.25rem;
+      }
+
+      route[scroll] {
+        display: block;
+        min-height: 100vh;
+        scroll-margin-top: calc(var(--nav-h) + 0.75rem);
+        padding: 2rem 1.25rem 4rem;
+        border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
+      }
+
+      route[scroll]:nth-of-type(odd) {
+        background: linear-gradient(165deg, var(--surface) 0%, var(--bg) 100%);
+      }
+
+      route[scroll]:nth-of-type(even) {
+        background: linear-gradient(-5deg, #121a24 0%, var(--surface) 100%);
+      }
+
+      .section-inner {
+        max-width: 42rem;
+        margin: 0 auto;
+      }
+
+      .eyebrow {
+        font-size: 0.75rem;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--muted);
+        margin: 0 0 0.5rem;
+      }
+
+      h1,
+      h2 {
+        margin: 0 0 1rem;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+      }
+
+      h1 {
+        font-size: clamp(1.75rem, 4vw, 2.25rem);
+      }
+
+      h2 {
+        font-size: clamp(1.35rem, 3vw, 1.75rem);
+      }
+
+      p {
+        margin: 0 0 1rem;
+        color: color-mix(in srgb, var(--text) 88%, var(--muted));
+      }
+
+      .pill {
+        display: inline-block;
+        padding: 0.2rem 0.6rem;
+        border-radius: 999px;
+        font-size: 0.7rem;
+        background: color-mix(in srgb, var(--accent) 18%, transparent);
+        color: var(--accent);
+        margin-bottom: 1rem;
+      }
+
+      .loading body {
+        opacity: 0.85;
+      }
+    </style>
   </head>
   <body>
-    <menu class="flex m-0 p-0"
-      ><a prefetch="onHover" href="/">Home</a><a preFetch="onHover" href="/about.html">About</a><a href="/admin" prefetch="onHover">Admin</a
-      ><a href="/irmfirmiror" prefetch="onHover">404</a> <a href="https://andreafuturi.com" prefetch="onHover">Google Test</a>
-    </menu>
-    HOME
+    <nav class="site-nav" aria-label="Scroll sections">
+      <span class="label">Jump</span>
+      <a href="/">Hero</a>
+      <a href="/landing-features">Features</a>
+      <a href="/pricing.html">Pricing</a>
+      <a href="/blog">Blog</a>
+      <span class="label" style="margin-left: auto"><a href="index.html">← Index</a></span>
+    </nav>
+
+    <router>
+      <route scroll path="/">
+        <div class="section-inner">
+          <p class="eyebrow">Scroll mode</p>
+          <h1>Landing hero</h1>
+          <p>Each <code>&lt;route scroll&gt;</code> is a tall section. Internal links smooth-scroll; all sections stay in the DOM.</p>
+          <p class="pill">min-height: 100vh</p>
+        </div>
+      </route>
+
+      <route scroll path="/landing-features">
+        <div class="section-inner">
+          <p class="eyebrow">Section 2</p>
+          <h2>Features</h2>
+          <p>Lazy content loads when this block is near the viewport (IntersectionObserver + 200px) or when you hover a link—same as the rest of the router.</p>
+          <p class="pill">min-height: 100vh</p>
+        </div>
+      </route>
+
+      <route scroll path="/pricing.html">
+        <div class="section-inner">
+          <p class="eyebrow">Section 3</p>
+          <h2>Pricing</h2>
+          <p>Empty routes fetch HTML from the server when you land here; inline placeholders skip the network.</p>
+          <p class="pill">min-height: 100vh</p>
+        </div>
+      </route>
+    </router>
+
     <script type="module">
       import { startRouter } from "./router.js";
-      // Initialize the router with a simple onRouteChange callback to test functionality
       startRouter({
-        onRouteChange: currentRoute => {
-          console.log("Route changed:", currentRoute);
-          currentRoute.classList.add("fade-in"); // Example: simple CSS class for animation (define it in CSS if needed)
+        debug: true,
+        onRouteChange: path => {
+          console.log(`📍 Route (scroll demo): ${path}`);
         },
       });
     </script>

package/src/pricing.html

@@ -0,0 +1,177 @@
+<!doctype html>
+<!-- Serve this file so the URL path is /landingpage.html (e.g. npx serve src). If your path is /src/landingpage.html, update route path="/landingpage.html" and the Hero nav href to match. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Pricing</title>
+    <style>
+      :root {
+        --bg: #0f1419;
+        --surface: #1a2332;
+        --text: #e8eef5;
+        --muted: #8b9cb3;
+        --accent: #3dd6c3;
+        --nav-h: 3.25rem;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        font-family: system-ui, sans-serif;
+        background: var(--bg);
+        color: var(--text);
+        line-height: 1.5;
+      }
+
+      .site-nav {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.5rem 1rem;
+        min-height: var(--nav-h);
+        padding: 0.5rem 1rem;
+        background: color-mix(in srgb, var(--bg) 92%, transparent);
+        backdrop-filter: blur(8px);
+        border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
+      }
+
+      .site-nav a {
+        color: var(--accent);
+        text-decoration: none;
+        font-weight: 600;
+        font-size: 0.9rem;
+      }
+
+      .site-nav a:hover,
+      .site-nav a:focus-visible {
+        text-decoration: underline;
+        outline: none;
+      }
+
+      .site-nav .label {
+        color: var(--muted);
+        font-size: 0.75rem;
+        margin-right: 0.25rem;
+      }
+
+      route[scroll] {
+        display: block;
+        min-height: 100vh;
+        scroll-margin-top: calc(var(--nav-h) + 0.75rem);
+        padding: 2rem 1.25rem 4rem;
+        border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
+      }
+
+      route[scroll]:nth-of-type(odd) {
+        background: linear-gradient(165deg, var(--surface) 0%, var(--bg) 100%);
+      }
+
+      route[scroll]:nth-of-type(even) {
+        background: linear-gradient(-5deg, #121a24 0%, var(--surface) 100%);
+      }
+
+      .section-inner {
+        max-width: 42rem;
+        margin: 0 auto;
+      }
+
+      .eyebrow {
+        font-size: 0.75rem;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--muted);
+        margin: 0 0 0.5rem;
+      }
+
+      h1,
+      h2 {
+        margin: 0 0 1rem;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+      }
+
+      h1 {
+        font-size: clamp(1.75rem, 4vw, 2.25rem);
+      }
+
+      h2 {
+        font-size: clamp(1.35rem, 3vw, 1.75rem);
+      }
+
+      p {
+        margin: 0 0 1rem;
+        color: color-mix(in srgb, var(--text) 88%, var(--muted));
+      }
+
+      .pill {
+        display: inline-block;
+        padding: 0.2rem 0.6rem;
+        border-radius: 999px;
+        font-size: 0.7rem;
+        background: color-mix(in srgb, var(--accent) 18%, transparent);
+        color: var(--accent);
+        margin-bottom: 1rem;
+      }
+
+      .loading body {
+        opacity: 0.85;
+      }
+    </style>
+  </head>
+  <body>
+    <nav class="site-nav" aria-label="Scroll sections">
+      <span class="label">Jump</span>
+      <a href="/">Hero</a>
+      <a href="/landing-features">Features</a>
+      <a href="/pricing.html">Pricing</a>
+      <a href="/blog">Blog</a>
+      <span class="label" style="margin-left: auto"><a href="index.html" data-router-ignore>← Index</a></span>
+    </nav>
+
+    <router>
+      <route scroll path="/">
+        <div class="section-inner">
+          <p class="eyebrow">Scroll mode</p>
+          <h1>Landing hero</h1>
+          <p>Each <code>&lt;route scroll&gt;</code> is a tall section. Internal links smooth-scroll; all sections stay in the DOM.</p>
+          <p class="pill">min-height: 100vh</p>
+        </div>
+      </route>
+
+      <route scroll path="/landing-features">
+        <div class="section-inner">
+          <p class="eyebrow">Section 2</p>
+          <h2>Features</h2>
+          <p>Lazy content loads when this block is near the viewport (IntersectionObserver + 200px) or when you hover a link—same as the rest of the router.</p>
+          <p class="pill">min-height: 100vh</p>
+        </div>
+      </route>
+
+      <route scroll path="/pricing.html">
+        <div class="section-inner">
+          <p class="eyebrow">Section 3</p>
+          <h2>Pricing</h2>
+          <p>Empty routes fetch HTML from the server when you land here; inline placeholders skip the network.</p>
+          <p class="pill">min-height: 100vh</p>
+        </div>
+      </route>
+    </router>
+
+    <script type="module">
+      import { startRouter } from "./router.js";
+      startRouter({
+        debug: true,
+        onRouteChange: path => {
+          console.log(`📍 Route (scroll demo): ${path}`);
+        },
+      });
+    </script>
+  </body>
+</html>

package/src/router.js

@@ -1,6 +1,60 @@
 let linkData = {};
 let debugMode = false;
 const log = (...args) => debugMode && console.log("🚦 Router:", ...args);
+
+/** @type {'auto' | 'smooth'} */
+let pendingScrollBehavior = "auto";
+let scrollUrlObserver = null;
+let suppressScrollUrlSyncUntil = 0;
+
+const normalizePath = p => {
+  const s = (p ?? "").replace(/\/$/, "");
+  return s;
+};
+
+/** @param {Element} router */
+const pathToScrollRoute = (router, path) => {
+  const n = normalizePath(path);
+  for (const r of router.querySelectorAll("route[scroll]")) {
+    if (normalizePath(r.getAttribute("path")) === n) return r;
+  }
+  return null;
+};
+
+const teardownScrollUrlObserver = () => {
+  scrollUrlObserver?.disconnect();
+  scrollUrlObserver = null;
+};
+
+/** @param {Element} router */
+const setupScrollUrlObserver = router => {
+  teardownScrollUrlObserver();
+  const scrollRoutes = [...router.querySelectorAll("route[scroll]")];
+  if (!scrollRoutes.length) return;
+
+  scrollUrlObserver = new IntersectionObserver(
+    entries => {
+      if (Date.now() < suppressScrollUrlSyncUntil) return;
+      const visible = entries.filter(e => e.isIntersecting);
+      if (!visible.length) return;
+      visible.sort((a, b) => b.intersectionRatio - a.intersectionRatio);
+      const best = visible[0].target;
+      const pathAttr = best.getAttribute("path");
+      if (!pathAttr) return;
+      const nextPath = normalizePath(pathAttr);
+      const here = normalizePath(globalThis.location.pathname);
+      if (nextPath === here) return;
+      const u = new URL(globalThis.location.href);
+      u.pathname = pathAttr.startsWith("/") ? pathAttr : `/${pathAttr}`;
+      globalThis.history.replaceState(null, "", u.pathname + u.search + u.hash);
+      log("📍 Scroll URL sync:", nextPath);
+      if (onRouteChange) onRouteChange(nextPath);
+    },
+    { root: null, rootMargin: "-38% 0px -38% 0px", threshold: [0, 0.1, 0.25, 0.5, 0.75, 1] },
+  );
+  scrollRoutes.forEach(r => scrollUrlObserver.observe(r));
+};
+
 const handlePopState = async () => {
   log("Navigation triggered to:", globalThis.location.pathname);
   document.body.classList.add("loading");
@@ -54,12 +108,38 @@ const handlePopState = async () => {
     }
   }
 
-  // Display only the current route
-  router.querySelectorAll("route").forEach(route => (route.style.display = "none"));
-  currentRoute.style.display = "contents";
+  const scrollRoutes = [...router.querySelectorAll("route[scroll]")];
+  const nonScrollRoutes = [...router.querySelectorAll("route:not([scroll])")];
+  const scrollTarget = pathToScrollRoute(router, currentPath);
+  const inScrollMode = Boolean(scrollTarget);
+
+  if (inScrollMode) {
+    scrollRoutes.forEach(r => {
+      r.style.display = "";
+    });
+    nonScrollRoutes.forEach(r => {
+      r.style.display = "none";
+    });
+    const behavior = pendingScrollBehavior;
+    pendingScrollBehavior = "auto";
+    if (behavior === "smooth") {
+      suppressScrollUrlSyncUntil = Date.now() + 550;
+    }
+    requestAnimationFrame(() => {
+      scrollTarget.scrollIntoView({ behavior, block: "start" });
+      requestAnimationFrame(() => setupScrollUrlObserver(router));
+    });
+  } else {
+    teardownScrollUrlObserver();
+    scrollRoutes.forEach(r => {
+      r.style.display = "none";
+    });
+    router.querySelectorAll("route").forEach(route => (route.style.display = "none"));
+    currentRoute.style.display = "contents";
+    window.scrollTo(0, 0);
+  }
 
   document.body.classList.remove("loading");
-  window.scrollTo(0, 0);
 
   // Call the route change handler if it's set
   if (onRouteChange) onRouteChange(currentPath);
@@ -110,6 +190,17 @@ const handleLinkClick = e => {
     log("Invalid link click:", link?.href);
     return;
   }
+  const router = document.querySelector("router");
+  const url = new URL(link.href);
+  const targetPath = url.pathname.replace(/\/$/, "");
+  if (router && pathToScrollRoute(router, targetPath)) {
+    log("🔗 Scroll-route link → smooth scroll:", link.href);
+    e.preventDefault();
+    pendingScrollBehavior = "smooth";
+    globalThis.history.pushState(null, null, link.href);
+    globalThis.dispatchEvent(new Event("popstate"));
+    return;
+  }
   log("Internal link clicked:", link.href);
   e.preventDefault();
   globalThis.history.pushState(null, null, link.href);
@@ -244,6 +335,8 @@ const startRouter = (options = {}) => {
   });
 
   observeLinks(observer);
+
+  void handlePopState();
 };
 
 export { startRouter };