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.
Yes you should be able to achieve that using Velo’s onViewportEnter & onViewportLeave event handlers.
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.
It’s pretty simple, I’ll walk you through it. Follow these steps:
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! 
Oh yeah, also don’t forget to set the transparency of the trigger element to zero once you’ve set it up!
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>
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.
Well done!
It worked fine. Thank you for your patience and effort! 
God bless ya!
Hello guys,
I have no experience coding, so I need some help.
Pratham mentioned that to make the code work across the site, it’s necessary to toggle on the “Show on all pages” boolean for the button from the toolbar before copying/pasting the code he provided. However, I’m using Wix Studio, and that option doesn’t appear. I reached out to Wix support, and they confirmed this. They pointed me to the following documentation: https://dev.wix.com/docs/velo/api-reference/$w/form/global
If this is the correct reference, could you kindly provide an example of the complete code and indicate where I should place it in the masterPage.js file? I already have some code there for a lightbox, so guidance on integration would be great.
Additionally, my site includes some shorter pages where the button isn’t necessary. Is it possible to exclude the button from appearing on those pages? Otherwise, I may need to follow Pratham’s earlier suggestion and copy/paste the trigger-specific code on each page, which I’d prefer to avoid if possible.
Thank you so much for your time and support!
Hey Alvaro,
That is correct, you cannot pin individual elements to the page in Studio as of now, like you can in the standard Wix editor. More on that below…
What does a form have to do with a Back To Top button? This is a totally incorrect reference.
As surprising as it may sound, creating a simple Back To Top button on Studio is rather painstaking and complex. This is because Studio for some reason does not allow us to set individual elements such as buttons as Global elements so that they can be added to all pages. This is only available for sections.
So by this logic, you would have to place that button inside a section, set it’s background to transparent, save it as a Global Section, and then go on adding that section individually to each page, make sure it is at the very bottom as the section needs to border the page on all breakpoints in order to pin it, and then finally pin that section to the page. You’d have to do this for each page in your site. However this comes with its own set of flaws.
Since this is a whole section that’s overlapping your page, all other page elements will move behind this section when the user scrolls. So even if the section is transparent and the user can see the content directly in line with the back to top button, they would not be able to click or interact with it in any way. Hope you understood what I’m trying to say here. This attempt to make the UX better would instead end up making it glitchier. Which is why I’d advise against having such a button on Studio, atleast until the ability to set individual elements as Global or something like that is released. However if you badly need it for some reason, then here’s one workaround that worked - you can try doing the same.
This workaround is only for Wix Studio and requires a Pinned Header on the site.
And now its time to add some code. Luckily, the code remains pretty much the same.
#backToTopIf followed correctly this shouldn’t affect or interfere with any pre-existing code that you might have written. Make sure there are no red lines or errors in the code before testing it out (you might have the wix-window-frontend module imported already for your lightbox code, in that case, you can exclude that line).
And there you go… that’s how you add a Back To Top / Scroll To Top button in Wix Studio (:
Hi Pratham,
Thank you very much for your kind help and detailed explanation.
After comparing the solutions you’ve proposed in previous posts and this one, it seems that the best, fastest solution is to set the back-to-top button with a trigger on each page.
Your help is much appreciated.