How to Add a Back to Top Button in Kadence Theme
Kadence has a scroll to top button built right into the free theme. You don’t need a plugin. It’s a single toggle in the Customizer, and the button appears in the bottom corner of your page whenever visitors scroll down. Lightweight, clean, and it just works.
I’ve seen people install dedicated “back to top” plugins for this – adding extra CSS, extra JavaScript, and extra database queries to their site. Meanwhile, Kadence already has the feature sitting there, turned off by default. One toggle and you’re done. Here’s how to set it up, plus the design options that make it match your site.
How Do I Enable the Scroll to Top Button?
The setting is buried a couple of levels deep in the Customizer, so here’s the exact path:
- Go to Appearance > Customize > General > Scroll To Top.
- Toggle “Enable Scroll To Top” to on.
- Click Publish.
That’s it. A small arrow icon now appears in the bottom-right corner of your site whenever someone scrolls down the page. Click it, and the page scrolls smoothly back to the top.
The button only shows up after the visitor scrolls down a certain distance. If they’re already at the top, it stays hidden. This is the standard behavior you’d expect from any scroll-to-top implementation, and Kadence handles it with a lightweight JavaScript listener – no jQuery dependency, no heavy animation library.
What Are the General Settings?
Before you jump to colors and styling, there are a few general options worth knowing about. They’re all in the same Scroll To Top panel.
Icon choice. You get 4 icon options – 2 arrow styles and 2 chevron styles. The default arrow-up is the most universally recognized. I’d stick with it unless your site has a specific design reason to change it.
Icon size. Adjustable in px, em, or rem. The default is fine for most sites, but if your audience skews older or you’re on a content-heavy blog, bumping it up a few pixels makes it easier to tap on mobile.
Alignment. Left or right. The default is right, and I’d recommend keeping it there. Bottom-right is where the web has trained people to look for this button. Moving it to the left can conflict with chat widgets like Crisp, Tidio, or LiveChat that typically sit in the bottom-left corner. While you’re customizing the bottom of your site, you might also want to check out adding social icons to your Kadence footer.
Side offset and bottom offset. These control exactly how far from the edge the button sits. Useful if the default position overlaps with a cookie consent banner or a floating chat bubble. You can nudge it up or sideways without changing the overall alignment.
Visibility. This is the one that catches people. By default, Kadence enables the button on desktop and tablet but turns it off on mobile. If you want it on phones too – and you probably do for long blog posts – you need to check the mobile checkbox here.
How Do I Customize the Button Design?
Switch to the Design tab at the top of the Scroll To Top panel. This is where you control how the button actually looks.
Button style. 3 options:
- Filled – solid background color with an icon on top (most visible)
- Outline – transparent background with a border around it (the default)
- Secondary – a subtler, secondary-color variation
I usually go with Filled for most sites. It’s the most noticeable, and the whole point of a back-to-top button is that people should be able to find it without hunting.
Icon colors. Set the initial color and hover color for the arrow icon itself. If you’re using Kadence’s global color palette, you can pick from your palette swatches here.
Background colors. Only available when the style is set to Filled. Set the background and hover background. I like using the site’s accent color for the background and a slightly darker shade for hover. Gives users visual feedback that the button is clickable.
Border colors and border style. Control the border appearance. Most relevant when using the Outline style, where the border is the main visual element.
Border radius. This is how you turn the default square button into a circle. Set all 4 values to something like 100px and the button becomes a perfect circle. A circular scroll-to-top button with a centered arrow is the most common pattern on modern sites. The default radius is 0 (a square), so you’ll probably want to change this.
Padding. Controls the space between the icon and the button’s edge. The default is 0.4em on all sides, which gives a nice balanced look. Increase it if you bumped up the icon size and need more breathing room.
What About Mobile – Should I Enable It?
I mentioned earlier that Kadence disables the scroll-to-top button on mobile by default. Here’s why that might be a deliberate choice – and why I still turn it on.
The argument against: Mobile screens are small. A floating button in the corner competes for space with sticky footer menus, cookie consent banners, and chat widgets. On a 375px-wide iPhone screen, every pixel matters.
The argument for: Mobile users scroll through long posts on their phones. Scrolling back up through a 2,000-word article with your thumb is annoying. A tap-to-top button is genuinely useful.
My recommendation: enable it on mobile, but check for conflicts. After enabling it, pull up your site on your phone (or use Chrome DevTools’ responsive mode) and scroll through a long post. Make sure the button doesn’t overlap with anything important. If it does, use the side offset and bottom offset controls to nudge it out of the way.
If you’re seeing extra white space in your Kadence footer, fix that first – it can affect how the scroll-to-top button positions relative to your page bottom. And if you’re using a sticky footer menu or a cookie consent plugin, test those specifically. The scroll-to-top button has a fixed position in the viewport, and so do those elements. They can stack on top of each other if the offsets aren’t adjusted.
Do I Need a Plugin Instead?
No. And I’d actively recommend against installing one.
Kadence’s built-in button uses native JavaScript and inline SVGs. It adds virtually nothing to your page weight. A dedicated back-to-top plugin, on the other hand, typically loads its own CSS file, its own JavaScript file, and sometimes even a font icon library – all for a single button that Kadence already provides.
I’ve tested sites where removing a back-to-top plugin shaved 2 extra HTTP requests and 15-20KB of unnecessary assets off every page load. That’s not a huge number on its own, but it adds up when you’re trying to hit good Core Web Vitals scores. I’ve written about fixing LCP issues in Kadence if you’re working on performance.
The only scenario where a plugin makes sense is if you need something Kadence’s button doesn’t offer:
- A scroll progress bar (the kind that fills up as you read)
- Multiple scroll targets (jump to specific sections, not just the top)
- Custom animations beyond the standard fade-in
For 95% of sites, the built-in option is all you need. Fewer plugins means fewer updates, fewer potential conflicts, and a faster site.
Quick Troubleshooting
| Problem | Cause | Fix |
|---|---|---|
| Button doesn’t appear | Feature disabled by default | Enable in Customize > General > Scroll To Top |
| Not showing on mobile | Mobile visibility unchecked | Check the Mobile box in Visibility settings |
| Button hidden behind sections | Z-index conflict with page elements | Try adjusting the bottom offset to move it away from conflicting elements |
| Can’t see it on the page | You haven’t scrolled down | Scroll down – the button only appears after scrolling |
| Background color option missing | Style set to Outline or Secondary | Switch to Filled style to see background color controls |
| Button overlaps chat widget | Both use fixed bottom-corner positioning | Increase the bottom offset or switch alignment to the opposite side |
My Recommended Settings
Here’s what I use on most of my Kadence sites:
| Setting | Value | Why |
|---|---|---|
| Enable | On | – |
| Icon | Arrow up (default) | Most recognizable |
| Style | Filled | Most visible for users |
| Alignment | Right | Web standard position |
| Border radius | 100px (circle) | Modern, clean look |
| Background color | Your accent color | Brand consistency |
| Visibility | Desktop + Tablet + Mobile | Long posts need it everywhere |
| Bottom offset | 30px | Clears most cookie banners |
These aren’t the “correct” settings – they’re a starting point. Your site’s design, color scheme, and footer elements might need different values. But this combination works well as a baseline that you can adjust from there.
Frequently Asked Questions
Is the Kadence scroll to top button available in the free version?
Yes. The scroll-to-top button is a free feature in Kadence theme. All the settings I covered – icon style, colors, border radius, visibility per device – are available without Kadence Pro. You don’t need any paid upgrade or third-party plugin.
Can I change the scroll distance before the back to top button appears?
Not through the Customizer. Kadence uses a fixed scroll threshold to trigger the button’s appearance. If you need a custom trigger distance, you’d need a small CSS/JS snippet. But for most sites, the default distance works well – the button shows up right when readers would naturally want it.
Does the Kadence back to top button work with WooCommerce product pages?
Yes. The scroll-to-top button is a theme-level feature that appears on every page type, including WooCommerce products, shop archives, and cart pages. The visibility settings (desktop, tablet, mobile) apply globally across all pages. There’s no way to show it only on certain page types without custom code.
Will the scroll to top button conflict with my cookie consent banner?
It can. Both the scroll-to-top button and most cookie consent plugins use fixed positioning in the bottom corner of the screen. If they overlap, increase the bottom offset in Kadence’s Scroll To Top settings to push the button above the banner. I’ve found 80-100px of bottom offset clears most consent bars.
Wrapping Up
Adding a scroll-to-top button in Kadence takes about 2 minutes. One toggle to enable it, a quick trip to the Design tab to make it look right, and a checkbox to turn it on for mobile users.
The key things to remember: it’s off by default, mobile is disabled by default, and the default style is Outline with a square shape. Most people will want to switch to Filled, add a border radius for a circular look, and enable mobile visibility.
And skip the plugin. Kadence’s built-in version is lighter, faster, and one less thing to maintain.
