Let’s be honest: if you have a massive, scrolling page, forcing users to thumb-drag all the way back up is annoying.
But you know what’s worse? Installing a bloated, 5MB plugin just to add a single button to your website.
You don’t need extra software for this. We are going to build this the clean, lightweight way using native features and a few lines of code.
Method 1: The Raw HTML Link
You don’t need to hack apart your PHP files to make this work. HTML lets you link directly to the ID of any element on the page.
Step 1: Find your target. Right-click the very top of your website and hit “Inspect.” Look at your <header> or <body> tag. Chances are, your theme already has an ID sitting right there, such as <body id="top"> or <header id="masthead">.
Step 2: Drop the link. Place this HTML anywhere you want the link to appear—a footer, a text widget, or the bottom of a post.
<a href="#top">Back to Top</a>
<a href="#top">
<img src="https://yourwebsite.com/wp-content/uploads/arrow-up.png" alt="Back to top" />
</a>
You can even drop this into your native WordPress Navigation Menu (under Appearance > Menus). Just put #top in the Custom Link URL field and “Back to Top” in the Link Text. Done.
Method 2: Making It Sticky
A text link sitting at the absolute bottom of the page is barely helpful. You probably want that little arrow hovering in the corner as the user scrolls.
Drop this snippet into a Custom HTML block in your site’s footer widget area:
<a href="#top" class="sticky-back-to-top">⬆️ Top</a>
Then, navigate to Appearance > Customize > Additional CSS and paste this in. It pins the button to the bottom right and adds a hover effect:
.sticky-back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
z-index: 9999;
}
.sticky-back-to-top:hover {
background-color: #555;
}Smooth Scrolling (Kill the jQuery)
In the past, developers forced heavy JavaScript libraries onto their sites just to make the page gracefully slide up instead of snapping instantly. Stop doing that.
You can enable smooth scrolling across your entire website with exactly three lines of CSS. Add this to your Additional CSS:
html {
scroll-behavior: smooth;
}That is it. The browser handles the animation natively now.
Method 3: Check Your Theme (And Ignore the Plugin Trap)
Before you touch any code, check your theme settings. Many performance-focused themes actually have a “Back to Top” toggle built right into the Customizer under Layout settings. If it’s there, turn it on and walk away.
If your theme doesn’t have it, rely on the CSS method above. The WordPress repository is packed with single-use “Scroll to Top” plugins promising advanced features.
Ignore them. Keep your database light, let native code do the heavy lifting.