Onpage Navigation with Dropdown & Anchor

Ask the community
, ,
1

Hi there,
I am creating a page on my wix site that displays an overview of the product that I carry. However, I would like to set up a on-site dropdown navigation that allows the page to automatically scroll down to the relevant section using anchor elements.

1879×666 53.7 KB

export function dropdown1_change(event, $w) {
let dropdownSelIndex = $w(“#dropdown1”).selectedIndex;
console.log(dropdownSelIndex);
if (dropdownSelIndex === “0”){
$w(“#orthoAnchor”).scrollTo();
return ;
}
if (dropdownSelIndex === “1”){
$w(“#gastroAnchor”).scrollTo();
return ;
}
}

The dropdown menu has id of dropdown1, the onChange() function also has function name of dropdown1_change. The anchor element ids are orthoAnchor and gastroAnchor respectively.

Here is the code I have written with reference to another user on this site, it does not seem to work. Could anybody kindly point out why this is so? I am a beginner with javascript and also with wix web design so I am very confused. Thank you for your help!

2

Hi there :raised_hand_with_fingers_splayed:

The problem is that the selected index is always a number (0, 1, 2, 3, etc…) while you’re using strings. Let me explain:

// Your code is
if (dropdownSelIndex === "0");

// While it needs to be
if (dropdownSelIndex === 0){

/* So, 0 does not equal to "0"
the first one is the number zero, and the second one a string as zero
so you can't use it add or subtract from it.

So you just need to remove the quotations from around the selected index.

Hope this helps~!
Happy Coding
Ahmad

3

Hi Ahmad,

Thank you for pointing it out! I was wondering where did I go wrong – only to find that I missed out the most basic concept of strings and value :joy:. Thank you for your valuable help!!

4

You’re welcome :wink: Feel free to tag me whenever you need help.