Return to top function

Ask the community
,
1

Hi, is there a return to top of page function? I have multiple galleries on my page and a drop-down menu. When you select an option from the drop-down, it hides the non-relevant galleries and only shows what that drop-down describes. I am not using a database because I want the option to click on an image from the gallery and have page open up in the same tab. What I am looking for is how to code a ‘return to top of page’ on click event. For example, if you scroll down the “All Projects” gallery and then use the drop-down to change it to the “Retail” gallery, I would like it to scroll up to top. Thanks in advance

2

How do I scroll to a specific point on my page?
Add an anchor to your page and use the scrollTo() function.
You can also use scrollTo() to scroll to a specific element on your page, or use scrollTo() with wix-window to scroll to an x-y coordinate on your page.

https://www.wix.com/corvid/reference/$w.Anchor.html#scrollTo

https://www.wix.com/corvid/forum/community-discussion/scroll-element-to-top-of-window

https://support.wix.com/en/article/adding-a-back-to-top-button-to-your-mobile-site

3

Thank you. I did find that code, I guess I am just a little confused on how to format it into the drop-down. So like when a certain option is selected it would scroll to top. Attached is my code from the drop-down as is, could you maybe help me figure out how to add that?

let fadeoutOption = {
“duration” : 2000,
“delay” : 0,
}
let fadeinOption = {
“duration” : 1500,
“delay” : 0,
}

export function dropdown1_change(event) {
if ($w(‘#dropdown1’).value === ‘All’){
$w(‘#galleryRFS’).hide(“fade”, fadeoutOption);
$w(‘#galleryCommunity’).hide(“fade”, fadeoutOption);
$w(‘#galleryRetail’).hide(“fade”, fadeoutOption);
$w(‘#galleryEA’).hide(“fade”, fadeoutOption);
$w(‘#galleryAll’).show(“fade”, fadeinOption);

}

if ($w(‘#dropdown1’).value === ‘RFS’){
$w(‘#galleryAll’).hide(“fade”, fadeoutOption);
$w(‘#galleryCommunity’).hide(“fade”, fadeoutOption);
$w(‘#galleryRetail’).hide(“fade”, fadeoutOption);
$w(‘#galleryEA’).hide(“fade”, fadeoutOption);
$w(‘#galleryRFS’).show(“fade”, fadeinOption);
}
if ($w(‘#dropdown1’).value === ‘Retail’){
$w(‘#galleryAll’).hide(“fade”, fadeoutOption);
$w(‘#galleryCommunity’).hide(“fade”, fadeoutOption);
$w(‘#galleryRFS’).hide(“fade”, fadeoutOption);
$w(‘#galleryEA’).hide(“fade”, fadeoutOption);
$w(‘#galleryRetail’).show(“fade”, fadeinOption);
}
if ($w(‘#dropdown1’).value === ‘EA’){
$w(‘#galleryAll’).hide(“fade”, fadeoutOption);
$w(‘#galleryCommunity’).hide(“fade”, fadeoutOption);
$w(‘#galleryRetail’).hide(“fade”, fadeoutOption);
$w(‘#galleryRFS’).hide(“fade”, fadeoutOption);
$w(‘#galleryEA’).show(“fade”, fadeinOption);

}

if ($w(‘#dropdown1’).value === ‘Community’){
$w(‘#galleryAll’).hide(“fade”, fadeoutOption);
$w(‘#galleryRetail’).hide(“fade”, fadeoutOption);
$w(‘#galleryRFS’).hide(“fade”, fadeoutOption);
$w(‘#galleryEA’).hide(“fade”, fadeoutOption);
$w(‘#galleryCommunity’).show(“fade”, fadeinOption);
}

}