ScrollTo Anchor Nav — Free GSAP ScrollToPlugin Snippet

CSS scroll-behavior: smooth gives you exactly one animation: the browser's fixed curve, no offset, no interruption handling, no completion callback. This sticky pill nav uses GSAP's ScrollToPlugin instead — every anchor click glides with a chosen ease over a chosen duration, lands *below* the sticky nav thanks to offsetY, hands the scrollbar back instantly if the user intervenes, and updates the URL hash on arrival.

scrollTo tweens the scroll position like any property

gsap.to(window, { scrollTo: { y: '#san-pricing' } }) treats the window's scroll position as a tweenable value: pick duration: 1 and power2.inOut and the journey accelerates out and brakes in like every other GSAP motion. Selectors, pixel numbers, 'max', and other elements' positions are all valid y values — and because it's a real tween, it sequences into timelines, can be paused, and reports onComplete.

offsetY solves the sticky-header cover-up

Native anchors scroll the target's top edge to the viewport's top edge — directly underneath any fixed or sticky header. offsetY: 76 lands the section 76px shy, exactly clearing the pill nav's height plus margin. This is the single most common reason teams abandon CSS smooth scrolling (its equivalent, scroll-margin-top, must be maintained on every *target*; offsetY lives once, at the *initiator*).

autoKill is scroll-jacking etiquette

A one-second programmatic scroll is an eternity if the user changes their mind. With autoKill: true, the moment any manual scroll input arrives (wheel, touch, keyboard), the tween kills itself and the user has full control — no rubber-banding, no fighting the scrollbar. Without it, the tween would keep re-asserting its trajectory against the user's input, the cardinal sin of scroll-jacking.

The hash updates without the jump

Clicking calls preventDefault() (or the browser would teleport instantly), then onComplete writes the hash via history.replaceState — so deep links and back-button state stay meaningful, but the write happens *after* arrival and never triggers the native jump. replaceState (vs pushState) keeps intra-page hops from polluting back-button history.

Active tracking by nearest-to-offset-line

The scroll listener highlights whichever section's top is closest to the 76px offset line — the same line scrollTo lands on, so a nav click always ends with its own link active. Nearest-distance beats threshold-crossing logic at the document's ends, where the last section may never reach the line. The listener is passive and does trivial math; for heavier pages, an IntersectionObserver approach like scroll spy nav trades precision for zero per-scroll work.

Note the CSS: scroll-behavior stays auto

If the page sets scroll-behavior: smooth, the browser would *also* smooth GSAP's scroll writes, double-easing every frame into mush. Keeping it auto gives the plugin full authority — a classic integration gotcha.

Customizing it

Tune duration/ease per distance (a common trick: scale duration by pixels traveled), scroll a container instead of the window (gsap.to('#panel', ...)), or pair the x axis for horizontal journeys. Related: observer-highlighted scroll spy nav, the scroll to top button, section decks in observer fullpage, and page-length context from a scroll progress bar.