Wix Tutorial - Using a dropdown to move to another point on a page
Clicking an item in the dropdown box will move you to another point on the page. In this case to any of the colored boxes. Make sure that the editValue(s) of the choices in the dropdown are named the same as in the code that you use. In this case, the values are blueBox, greenBox, etc.
Elements:
User Input:
-
Dropdown: #dropdown | Add onChange event in the Properties Panel
-
Blue box: #blueBox
-
Green box: #greenBox
-
Orange box: #orangeBox
-
Pink box: #pinkBox
Wix Code:
$w.onReady(() => {
$w('#dropdown').onChange(() => {
let val = $w('#dropdown').value;
if (val === "blueBox") { $w('#blueBox').scrollTo() }
if (val === "greenBox") { $w('#greenBox').scrollTo() }
if (val === "orangeBox") { $w('#orangeBox').scrollTo() }
if (val === "pinkBox") { $w('#pinkBox').scrollTo() }
})
})
Demo:
#blueBox
#greenBox
#orangeBox
#pinkBox
