Is there currently a way to create a “back to the top” button that reveals when scrolling down and disappears at some point of the page when scrolling up?
Hi,
Great question!
You can use Velo to trigger an element to show/hide based on the scroll position.
Here is an example code below:
$w (“#myElement”). onViewportEnter ( ( event ) => {
$w(“#backToTop”).show();
});
thank you
Hi, how can achieve this without Velo? As i do not have any coding knowledge.
Maybe there is a better way to do it but, here is how i made it work :
1/ create your back to top button : add element > choose your button > fix position > allow on all pages
2/ create a rectangle box : add element > choose a box > put the box where your back to top button go (for example, for me it’s on the right of the page) > adjust opacity to make the box invisible > allow on all pages
3/ adjust the box from where you want your back to top button to start showing up all the way down to your page footer
4/ go to dev mod and turn it on > go to global page code (masterPage.js)> select the invisible box > on the coding interface, show “properties and events” > select OnViewportEnter() and add then select OnViewportLeave() and add
this will add on your global code page these events
5/ under OnViewportEnter() add $w(“#yourbacktotopid”).show()
under OnViewportLeave() add $w(“#yourbacktotopid”).hide()
Ultimately, it would be something like this (my box id is box10 and my back to top button id is vectorimage4) :
// this hide the button when you load the page
$w(“#vectorImage4”).hide()
// this show the button when scroll on the page
export function box10_viewportEnter(event) {
$w(“#vectorImage4”).show()
}
// this hide the button where the box is not
export function box10_viewportLeave(event) {
$w(“#vectorImage4”).hide()
}