Make a Scroll to top button disappear after scrolled to top

Ask the community
, ,
1

Question:
I´d like to know how to hide a button when/after the page IS ALERADY top. That means that I want it to be shown only after user start scrolling it or after the page is after some point…is it possible on VELO?

Product:
Wix Editor

What are you trying to achieve:
Hide the button when page starts (first time) or it is scrolled to top.

2

Yes you should be able to achieve that using Velo’s onViewportEnter & onViewportLeave event handlers.

3

Yes. Thanks for the answer. I tried but I don´t understand how it works. I tried something about:

onViewportLeave($w(‘btnScrollUp’).show)
onViewportEnter($w(‘btnScrollUp’).hide)

But it is not working. Where am I failing? Can you help me bro? I´m sorry for the job I´m loading you.

4

It’s pretty simple, I’ll walk you through it. Follow these steps:

  1. Add your back to top button and pin it to the corner of the page.
  2. Now add an element to the very top of the page. This can be a box / text / shape / vector art… anything. This will act as a trigger for your button.
  3. Now turn on Dev Mode and select the trigger element .
  4. From the properties panel, set the name of the element as trigger.
  5. Now select the button that you added and name it as backToTop. Also make sure to check the Hidden property, since we want the button to appear only when the user scrolls and not initially.

Once you’ve successfully done these steps, delete any page code you may have and paste the one that I’ve provided below:

$w.onReady(function () {

    $w('#trigger').onViewportEnter(() => {

        $w('#backToTop').hide();

    });

    $w('#trigger').onViewportLeave(() => {

        $w('#backToTop').show();

    })

});

Here’s a working example that I’ve created to show you how this works:
https://preztech.wixsite.com/classic-test/back-to-top

The way this code works, is that as soon as the trigger element goes off the user’s screen (viewport), the Back To Top button becomes visible. As soon as the trigger comes back inside the screen, the button disappears.

It’s pretty simple, and as long as you don’t have any red lines in your code, you’re good! :slight_smile:

Oh yeah, also don’t forget to set the transparency of the trigger element to zero once you’ve set it up!

1 Like
5

The problem is that I have a fixed header on the top that remains shown until scroll it at some point of the window, then it disappears. In addition, I can´t only do it on the start page, if so, it will work only on this page, but I need for the whole site. May I do it on MasterPage.js?

PS: I did it, and it not worked. I chose a Vector element that is already put on the very top left corner of the header…

It seems your suggestion only works only on a single page that has the button, without header section…

Maybe can you do it using pure JS, instead of onViewportLeave and onViewportEnter events? Something like:

if w$('#backToTop').position > 800 {
w$('#backToTop').hide()
}
else {
w$('#backToTop').show()
}

of course we can do it using ternary. it´s just a didactic example.

I guess something about it, but using velo “language”, not jQuery:

<script>
 // Access button
var mybutton = document.getElementById("scrollDown");
window.onscroll = function() {scrollFunction()};

// Scroll to bottom function
function bottom() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 
    // If scrolled down, make button appear.
    mybutton.style.display = "block"; // Show button
  } else {
    mybutton.style.display = "none"; / Hide button
  }
}
</script>
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
7

Well done!
It worked fine. Thank you for your patience and effort! :wink:

God bless ya!

1 Like