Simple 1-Minute Guide to add a Back-to-Top Button with Vue 3

for free access to a treasure trove of resources!

Styles

The button’s fixed position ensures it remains in view as the user scrolls. Hover effects provide a polished touch.

<style lang="less" scoped>

.back-to-top-control {

    display: flex;

    align-items: center;

    justify-content: center;

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 1000;

    width: 60px;

    height: 60px;

    color: black;

    background-color: white;

    border-radius: 50%;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    opacity: 0.5;

    transition: opacity 0.3s ease;



    &:hover {

        opacity: 1;

    }



    > svg {

        width: 24px;

        height: 24px;

    }

}

</style>

How It Works

1. 
   Scroll Detection : A scroll event listener checks if the user has scrolled more than 200 pixels. If true, isVisible becomes true, displaying the button.


2. 
   Smooth Scroll : Clicking the button triggers the scrollToTop function, which uses window.scrollTo with a behavior of smooth.


3. 
   Lifecycle Hooks : onMounted and onBeforeUnmount ensure that event listeners are properly managed to prevent memory leaks.

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!