Loading page
About this tool
Generate real anchor, smooth scroll, route navigation, button jump, and reusable navigation snippets instantly.
The Jump Code Generator writes ready-to-paste navigation code for seven patterns — plain HTML anchor, offset smooth scroll, button jump, React Router link, React scrollIntoView section, a reusable delegated snippet, and a custom animated jump — from a short form of IDs, labels and offsets. Every scroll variant computes its destination as getBoundingClientRect().top + window.scrollY minus your sticky-header offset in pixels, which is the part people usually get wrong. It is for front-end developers who want the correct version of an on-page jump rather than the first Stack Overflow answer.
Open Jump Code Generator on AltFTool — it loads instantly in your browser.
Pick a code type: HTML Anchor Jump, Smooth Scroll, Button Jump, React Router Navigation, Scroll-to-Section, Snippet Generator or Custom Jump Logic.
Fill the fields that type needs, such as Section ID, Link Text and Offset (px), which starts at 80.
Press Copy on the Generated Code Output, or Download to save it as html-anchor.html, react-router.jsx or snippet.js.
The offset you enter is subtracted from the target's absolute page position, so the section heading clears a sticky nav instead of hiding behind it.
Switch between HTML, vanilla JS, React Router and React ref approaches and the form shows only the fields that pattern actually needs.
Section IDs are lowercased and stripped of illegal characters and function names are coerced into valid JavaScript identifiers, with a warning telling you what changed.
Subtract the header height from the scroll target: top = element.getBoundingClientRect().top + window.scrollY - offset. Enter your header height in the offset field — 80 is the default here — and the generated smooth-scroll, button-jump and snippet code all apply it.
smooth animates the scroll while auto jumps instantly, and both are values of the native window.scrollTo behavior option. Choose auto when you want the browser's instant default, and note that a visitor with prefers-reduced-motion set may have smooth downgraded to instant by the browser anyway.
No — the custom jump runs its own requestAnimationFrame loop with a cubic ease-out curve over a duration you set in milliseconds, defaulting to 600ms. Use it when you need a specific animation length or easing that the native smooth behavior does not let you control.
Yes, the snippet option emits a single exported function that queries a selector — [data-jump-target] by default — and binds one offset-aware click handler to every match. Call it once after render and new links matching the selector are covered by the same code.