How to Add a Scroll to Top Button in WordPress

On long articles and product pages, swiping all the way back up is tiring. A scroll to top button appears after visitors scroll down and takes them back to the top in one tap. Here are four ways to add it.

Method 1: Your theme's setting

Go to Appearance > Customize and look for "Scroll to Top" (Astra, Kadence, Blocksy, OceanWP and others include it). Enable it and choose the icon, colors and position.

Method 2: A lightweight plugin

Small scroll-to-top plugins add the button with options for icon, color, position and when it appears. Choose one that is lightweight and recently updated.

Method 3: Elementor

1. Add a container with an Icon or Button widget (an up arrow).
2. Set the link to #top and give your header container the CSS ID top.
3. Set the container's position to Fixed, bottom right, in Advanced settings.
4. Place it in your footer template so it appears site-wide.

Method 4: A small code snippet

Add this with a code-snippets plugin (in the footer) or a child theme:

<a href="#" class="to-top" aria-label="Back to top">↑</a>
<style>
.to-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;
border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;
text-decoration:none;opacity:0;pointer-events:none;transition:.3s}
.to-top.show{opacity:1;pointer-events:auto}
</style>
<script>
addEventListener('scroll',function(){
  document.querySelector('.to-top').classList.toggle('show',scrollY>600);
});
</script>

Tips

• Show it only after scrolling about one screen.
• Don't overlap your WhatsApp button or chat bubble.
• Add an accessible label.