BackToTop

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BackToTop
  label="Back to top"
  assistiveLabel="Return to the top of the page"
  threshold="500"
/>

Legacy mount name: data-component="BackToTop".

Props and attributes

Slots

This component does not declare a slot.

Events

• click

Source contract

Installed source: components/BackToTop.wrn

component BackToTop {
    props {
        class = ""
        label = "Back to top"
        assistiveLabel = "Return to the top of the page"
        threshold = 500
    }

    state visible = false

    functions {
        function updateBackToTopVisibility() {
            visible = window.scrollY > threshold
        }

        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            })
        }
    }

    lifecycle {
        mount {
            updateBackToTopVisibility()

            window.addEventListener(
            "scroll",
            updateBackToTopVisibility,
            { passive: true }
            )
        }

        unmount {
            window.removeEventListener(
            "scroll",
            updateBackToTopVisibility
            )
        }
    }

    watch visible {
        console.debug(
        "Back-to-top visibility:",
        value,
        previous
        )
    }

    view {
        <div
            class="group fixed bottom-6 right-5 z-[70] flex items-center gap-2 transition-all duration-300 sm:right-6 lg:bottom-8 lg:right-8 {class}"
            class:pointer-events-none="!visible"
            class:translate-y-5="!visible"
            class:scale-90="!visible"
            class:opacity-0="!visible"
            class:pointer-events-auto="visible"
            class:translate-y-0="visible"
            class:scale-100="visible"
            class:opacity-100="visible"
        >
        <!-- Hover label -->
        <span
                class="pointer-events-none hidden translate-x-2 whitespace-nowrap rounded-xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-semibold text-slate-700 opacity-0 shadow-lg shadow-slate-950/10 backdrop-blur-xl transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-200 dark:shadow-black/30 sm:block"
            >
                {label}
            </span>
        <!-- Gradient border wrapper -->
        <div
                class="relative rounded-2xl bg-linear-to-br from-indigo-500 via-violet-500 to-cyan-500 p-px shadow-xl shadow-indigo-600/20 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-indigo-600/30"
            >
        <!-- Glow -->
        <div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/20 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100" >
        </div>
        <button
                    type="button"
                    @click="scrollToTop()"
                    aria-label="{label}"
                    title="{label}"
                    class="relative grid h-12 w-12 place-items-center rounded-[15px] bg-white/95 text-indigo-700 backdrop-blur-xl transition duration-300 hover:bg-indigo-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 active:scale-95 dark:bg-slate-900/95 dark:text-indigo-300 dark:hover:bg-indigo-500 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:h-13 sm:w-13"
                >
        <!-- Arrow -->
        <span class="icon-[lucide--arrow-up] h-5 w-5 transition-transform duration-300 group-hover:-translate-y-0.5" aria-hidden="true" >
        </span>
        <span class="sr-only">
                        {assistiveLabel}
                    </span>
        </button>
        </div>
        </div>
    }
}