Make a Scroll to top button disappear after scrolled to top

Ask the community
, ,
6

If you want the code to work throughout the site instead of just one page, there’s another way of doing it - and this one does not include any triggers but instead fetches the scroll values of the window. Before you use this code, make sure to toggle on the Show on all pages boolean for the button from the toolbar and then pin it in an ideal location. Once that is done, you can use this code in your masterPage.js file:

import wixWindowFrontend from 'wix-window-frontend';

const offset = 100 // The amount of pixels after which the Back to Top button should appear

$w.onReady(function () {
    getScrollInfo();
});

function getScrollInfo(params) {
    wixWindowFrontend.getBoundingRect()
        .then((windowSizeInfo) => {

            let scrollY = windowSizeInfo.scroll.y;

            if (scrollY > offset) {
                $w('#backToTop').show();
            } else {
                $w('#backToTop').hide();
            }

            setTimeout(() => {
                getScrollInfo();
            }, 1000);

        });

}

I’ve tested it out, it works like a charm, across the whole site.

1 Like