HTML Back to Top Button Code
Create your Back to Top widget
Screenshots
Why People Love Elfsight
Wouldn’t it be nice if your website just guided people effortlessly? The Elfsight Back to Top widget does exactly that. It gives readers a friendly shortcut to jump to the start of a page, making long pages feel lighter and easier to explore. Setup takes minutes and works even if you’re not a tech wizard – just copy a small snippet of HTML code, paste it into your website, and you’re ready to roll.
If you’ve ever wondered how to make a Back to Top button in HTML, this widget saves you the trouble of coding from scratch. It takes care of the design, animation, and placement automatically.
Did you know?
Nielsen Norman Group found that users spend most of their viewing time near the top of a page.
Start using the Elfsight Back to Top widget today to give visitors a speedy way up – you’ll make long pages feel tidy and stress-free.
Key Features of the HTML Back to Top Button
Let’s keep navigation simple, fast, and friendly. Here’s what you can expect day-to-day:
- Flexible placement: Choose a neat floating button or place it inline inside your content – both are easy to set up.
- Custom look and feel: Colors, shapes, icons, size, shadow, label – match your branding in a few clicks.
- Smart behavior: Show after X pixels scrolled, hide on top, add smooth scroll, and adjust scroll speed to your preference.
- Mobile-ready by default: Looks great on phones and tablets, with tap-friendly hit areas and lightweight performance.
- Multiple positions: Bottom-right, bottom-left – pick what fits your layout best.
- Accessibility-friendly: Aria labels, focus states, and keyboard navigation help everyone use it comfortably.
- No-code install: Copy the small code, paste it where you want it – that’s the whole story.
- Low weight: Loads fast and stays out of the way, even on content-heavy pages.
How to Add the Back to Top to HTML
There’re two simple paths depending on where you want the button to appear.
Method 1: Inline Back to Top
Use this if you want the button inside your page content (like after a long article).
- Choose a template: Open the Elfsight editor and pick a layout you like.
- Style it: Set icon, color, and size, then preview how it looks.
- Copy the installation code: Click “Add to website for free” to get your snippet.
- Paste into your HTML: Add the snippet where you want the button to appear within your page markup.
Method 2: Floating Back to Top
Great for a sticky button that follows the reader as they scroll.
- Pick the floating layout: In the editor, select a floating style.
- Adjust position and behavior: Set bottom/right offsets, show-after-scroll value, and smooth scroll.
- Copy the installation code: You’ll get a small script block.
- Paste before the closing
</body>tag: The button will appear on every page where you add the snippet.
Need help? Visit our Help Center for detailed step-by-step guides. You can share ideas in the Wishlist and track updates in the Changelog.