Adding a 'scroll to top' button to your site in 5 minutes

“How do I get one of those little arrows that takes you back to the top?”

A client asked me this last week. She’d been browsing competitor websites and noticed most of them had this feature – a small button in the corner that appears when you scroll down, and clicking it whisks you back to the top of the page.

It’s one of those things you don’t think about until you’re halfway down a long page on your phone, thumb getting tired from scrolling back up. Then you really appreciate it.

The good news: this takes about five minutes to add. You don’t need a plugin. You don’t need to hire anyone. If you can copy and paste, you can do this.

What we’re building

A small circular button that:

• Stays fixed in the bottom-right corner
• Only appears when you’ve scrolled down a bit (so it’s not cluttering up your page when you’re already at the top)
• Smoothly scrolls you back to the top when clicked
• Looks decent without any design skills required

The code

You’ll need to add three things to your website: some HTML, some CSS, and a tiny bit of JavaScript. Don’t let that put you off – I’ll explain each part.

Step 1: The HTML

Add this somewhere in your page, ideally just before the closing </body> tag:

<button id="scroll-to-top" aria-label="Scroll to top">↑</button>

That’s it. One line. The aria-label bit is for screen readers – it tells people using accessibility tools what the button does.

Step 2: The CSS

This goes in your stylesheet, or inside a <style> tag in your page header:

#scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #333;
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
}

#scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}

#scroll-to-top:hover {
  background: #555;
}

Let me break that down:

• position: fixed keeps it in the same spot even when you scroll
• bottom: 20px; right: 20px puts it in the bottom-right corner with a bit of breathing room
• border-radius: 50% makes it circular
• opacity: 0; visibility: hidden hides it by default
• The .visible class shows it when we add that class with JavaScript
• The transition makes it fade in and out smoothly rather than just appearing

Feel free to change the colours. The #333 is a dark grey – swap it for whatever matches your site.

Step 2b: Using Tailwind CSS instead

If your site uses Tailwind CSS (and a lot of modern sites do), you can skip the CSS file entirely and use classes directly on the button:

<button
  id="scroll-to-top"
  aria-label="Scroll to top"
  class="fixed bottom-5 right-5 w-12 h-12 rounded-full bg-gray-800 text-white text-2xl border-none cursor-pointer opacity-0 invisible transition-all duration-300 z-50 hover:bg-gray-600"
>↑</button>

Then add this to your Tailwind config or use a tiny bit of custom CSS for the visible state:

#scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}

Or if you prefer pure Tailwind, you can toggle classes with JavaScript instead:

// Instead of adding/removing 'visible' class, toggle Tailwind classes:
if (window.scrollY > 300) {
  scrollBtn.classList.remove('opacity-0', 'invisible');
  scrollBtn.classList.add('opacity-100', 'visible');
} else {
  scrollBtn.classList.add('opacity-0', 'invisible');
  scrollBtn.classList.remove('opacity-100', 'visible');
}

Same result, just using Tailwind’s utility classes. The Tailwind documentation is excellent if you want to tweak the styling further.

Step 3: The JavaScript

Add this just before the closing </body> tag, after the button HTML:

<script>
const scrollBtn = document.getElementById('scroll-to-top');

window.addEventListener('scroll', function() {
  if (window.scrollY > 300) {
    scrollBtn.classList.add('visible');
  } else {
    scrollBtn.classList.remove('visible');
  }
});

scrollBtn.addEventListener('click', function() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});
</script>

Here’s what this does:

1. Finds the button we created
2. Watches for scrolling – when you’ve scrolled more than 300 pixels down, it adds the “visible” class to show the button
3. When you click the button, it scrolls smoothly back to the top

The behavior: 'smooth' part is what makes it glide up rather than just jumping. Much nicer.

Where to put this in different website builders

WordPress: If you’re using a theme with a code snippets area, put the HTML and JavaScript in the footer section, and the CSS in the customiser’s “Additional CSS” area. Or use a plugin like “Insert Headers and Footers” if your theme doesn’t have this.

Squarespace: Go to Settings > Advanced > Code Injection. Put everything (HTML, CSS in a style tag, and the script) in the Footer area.

Wix: You’ll need Wix Velo (their developer tools). Add the HTML as an embed, and the CSS/JS through the Velo code panel. Honestly, Wix makes this harder than it needs to be.

Static HTML sites: Just add it directly to your HTML file before the closing </body> tag.

A few tweaks you might want

Different position: Change bottom: 20px; right: 20px to put it somewhere else. Want it on the left? Use left: 20px instead of right.

Different appearance: Don’t like the arrow? Replace ↑ with whatever text or icon you prefer. “Top”, ”▲”, or an SVG icon all work.

Different scroll threshold: That 300 in the JavaScript controls when the button appears. Make it bigger if you want it to appear later, smaller if sooner.

Different colours: The #333 is the background colour, white is the arrow colour. Change them to match your brand.

Why not just use a plugin?

You could. There are dozens of “scroll to top” plugins for WordPress alone.

But here’s the thing: each plugin you add is another thing to maintain, another potential security vulnerability, another thing that might break when you update something else. For something this simple – genuinely about 20 lines of code – it makes sense to just add it yourself.

Plus, you now understand how it works. If something breaks, you can fix it. If you want to change it, you know where to look.

Does this actually matter?

For short pages? Not really. Nobody needs help scrolling back up a 500-word page.

But if you’ve got longer content – detailed service pages, blog posts, FAQs – it’s a small thing that makes your site feel more polished and user-friendly. Mobile users especially appreciate not having to scroll-scroll-scroll back to your navigation.

It’s one of those details that separates a website that feels professional from one that feels a bit amateur. Small things add up.

Further reading

If you want to dig deeper into any of this:

• MDN Web Docs: scrollTo() – The official documentation for the scroll function we used. Useful if you want to understand all the options available.
• CSS-Tricks: Smooth Scrolling – A comprehensive guide to different smooth scrolling approaches.
• Tailwind CSS Documentation – If you went the Tailwind route and want to customise things further.
• W3Schools: Position Fixed – Good refresher on CSS positioning if that concept is new to you.
• Heroicons – Free SVG icons if you want something fancier than a text arrow. They work beautifully as scroll-to-top buttons.

If you’re not comfortable adding code to your site – or you’ve tried and something’s gone wrong – drop me a message. Happy to take a look. Sometimes the issue is just a missing semicolon or a theme that’s doing something weird. Usually a quick fix.