Scroll-to-Top Button

✅ Steps to Add in WPCode Plugin:

1. Go to WPCode → Add New Snippet
2. Select “HTML Snippet”
3. Paste the code below
4. Set Location: Site Wide (Footer)
5. Activate the Snippet

📌 Full Code for WPCode Plugin

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<style>
/* Scroll-to-Top Button Styling */
#scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #000;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

#scroll-to-top:hover {
    background-color: #333;
    transform: scale(1.1);
}
</style>

<!-- Scroll-to-Top Button -->
<div id="scroll-to-top">
   <i class="fa-solid fa-arrow-up"></i>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var scrollButton = document.getElementById("scroll-to-top");

    // Show button when scrolling down
    window.addEventListener("scroll", function () {
        if (window.scrollY > 300) {
            scrollButton.style.opacity = "1";
            scrollButton.style.visibility = "visible";
        } else {
            scrollButton.style.opacity = "0";
            scrollButton.style.visibility = "hidden";
        }
    });

    // Scroll to top when clicked
    scrollButton.addEventListener("click", function () {
        window.scrollTo({ top: 0, behavior: "smooth" });
    });
});
</script>

🔹 How It Works:

✅ The button appears when the user scrolls 300px down.
✅ Smoothly scrolls to the top when clicked.
✅ The button is styled to be minimal and responsive.

Just activate the snippet in WPCode, and your Scroll-to-Top Button will work! 🚀