ForumSpark Support Themes & Extensions Join

Go to Top Button

· 1 year ago · 3 replies · 56

This goes into your Below the Board template. You can adjust the style of the button using CSS between the <style> tags.

Preview: https://prnt.sc/J5TmePMR9D3z

<style>
        #goTopBtn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
            background: #1a152c;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>

<button id="goTopBtn" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">Top</button>

<script>
    const goTopBtn = document.getElementById('goTopBtn');
    window.addEventListener('scroll', () => {
        goTopBtn.style.display = window.scrollY > 200 ? 'block' : 'none';
    });
</script>

3 replies

· 1 year ago

Love it! Do you think it'll be added as part of the default coding eventually?

· 1 year ago

Honestly it's not something I was intending to include, I really saw this as something for theme developers to (choose to) include in their themes. But if there is a demand for it to be included and people would prefer it as a default feature then it wouldn't hurt to add it in.

· 7 months ago

I made a few edits

I removed the text, added an arrow icon, and fixed the issue where it was going under the copyright footer div. It was appearing underneath it for me before, but now it sits correctly above it.

<style>
#goTopBtn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#2b1f4a,#1a152c);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(120,90,255,0.3);
}

#goTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#goTopBtn:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 18px rgba(140,110,255,0.6);
    background: linear-gradient(135deg,#3a2a6a,#241c3f);
}
</style>

<button id="goTopBtn" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
↑
</button>

<script>
const goTopBtn = document.getElementById('goTopBtn');

window.addEventListener('scroll', () => {
    if (window.scrollY > 200) {
        goTopBtn.classList.add("show");
    } else {
        goTopBtn.classList.remove("show");
    }
});
</script>

Create a free account to join the conversation.
Sign up free