# Create a Back to Top Button with Just HTML and CSS URL: https://theosoti.com/short/back-to-top/ Published: 2025-07-22 Author: Theo Soti Tags: CSS, modern CSS, scroll-driven animations, CSS animations, accessibility, performance, HTML > Create a back to top button with HTML and CSS using native smooth scrolling. No JavaScript, lightweight, and accessible. ## Most “back to top” buttons use JavaScript. But they really don’t have to. The browser already knows how to scroll. We just have to ask nicely. All you need is: - Give your page an `id="top"` (usually on the ``). - Add a link with `href="#top"` that scrolls back to the top. - Use `position: fixed` to pin it in the corner. - And `scroll-behavior: smooth` on the html for smooth transitions No listeners. No scroll events. No extra code. This is simpler, faster, and works everywhere. Sometimes, native HTML and CSS are all you need. Checkout the codepen: https://codepen.io/theosoti/pen/KwdzKGx For accessibility, give the link a clear label (for example `aria-label="Back to top"`) and ensure the focus ring is visible when navigating by keyboard. Native anchors already preserve expected browser behavior, including opening in new tabs. If you use smooth scrolling, consider respecting `prefers-reduced-motion` by disabling animated scroll for users who opt out of motion. A native anchor-based back-to-top control stays lightweight and predictable across browsers. Place it where it is easy to reach, keep a clear label, and ensure anchor targets remain visible under sticky headers. Anchor-based back-to-top patterns stay lightweight and robust. Pair them with clear placement and heading offsets so users return to context without layout jumps. Validate it with real content and realistic viewport ranges so implementation details hold up outside demos. A practical way to adopt `position: fixed` is to scope it to one high-impact component first. After validation, expand gradually to matching components and avoid ad-hoc one-off overrides. --- If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript. Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!