Add a Go-To-Top Button (Circle with Arrow)
This creates a floating button that:

• appears after scrolling
• smoothly scrolls to the top
• has a hover animation
• works with Elementor

Step 1 — Add the HTML

Add an HTML widget in Elementor (footer template or anywhere on the page).

Paste this:

<div id=”scrollTopButton”>
<svg viewBox=”0 0 24 24″>
<path d=”M12 4L4 12H9V20H15V12H20L12 4Z”></path>
</svg>
</div>

Update the page.

Step 2 — Add the CSS

Go to:

WordPress → Appearance → Customize → Additional CSS

Paste this:

/* SCROLL TO TOP BUTTON */

#scrollTopButton{
position:fixed;
bottom:40px;
right:40px;
width:64px;
height:64px;
background:#330B50;
border-radius:50%;
border:6px solid white;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:999999;

opacity:0;
transform:translateY(20px);
transition:all .35s ease;

overflow:hidden;
}

/* visible after scrolling */

#scrollTopButton.show{
opacity:1;
transform:translateY(0);
}

/* arrow */

#scrollTopButton svg{
width:38px;
height:38px;
fill:white;
display:block;
transition:transform .25s ease;
}

/* arrow hover animation */

#scrollTopButton:hover svg{
transform:translateY(-4px);
}

/* circle hover animation */

#scrollTopButton:hover{
transform:translateY(-3px);
}

Save.

Step 3 — Add the JavaScript

Install or use the plugin Code Snippets.

Go to:

Snippets → Add New

Select JavaScript Snippet.

Set location:

✔ Site Wide Footer

Paste this code:

document.addEventListener(“DOMContentLoaded”,function(){

const button=document.getElementById(“scrollTopButton”);

if(!button) return;

window.addEventListener(“scroll”,function(){

if(window.scrollY > 300){
button.classList.add(“show”);
}else{
button.classList.remove(“show”);
}

});

button.addEventListener(“click”,function(){
window.scrollTo({
top:0,
behavior:”smooth”
});
});

});

Save and activate.

Result
You now have a button that:

✔ appears after scrolling
✔ floats bottom-right
✔ scrolls smoothly to the top
✔ has hover animation
✔ works on Elementor sites

Customization

Change the button color

background:#330B50;

Change the border thickness

border:6px solid white;

Change the button size

width:64px;
height:64px;

Change the arrow size

#scrollTopButton svg{
width:38px;
height:38px;
}