Using Dropdown to Move | WixCreate | Wix Code - Corvid
 

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:

arrow&v

#blueBox

#greenBox

#orangeBox

#pinkBox

Websites designed by WixCreate that use the above Wix Code:

None.

Official Wix Expert & Wix Agency Partner

© 2020 by WIXCreate.com

I  All Rights Reserved  I  info@wixcreate.com  I  202-640-5440

facebook-2.gif