Hello everybody,
I have been building a page for a course on our website that has a collapsible menu element that I built using the template I found here ( https://www.wix.com/corvid/example/collapse-elements ). After a few little issues I was able to make the menu work nicely for the large amount of content I was trying to put in the menu.
However, I discovered that when I click down the menu that the next section of the menu will open and the page is scrolled either half way down or right to the bottom of the new part that opened which will be frustrating to the user having to scroll back up every time. So, I started messing around with the scrollTo function to see if I could make the page code scroll to the top of each menu section whenever someone clicks the corresponding menu element.
After some testing I added this to my code to allow the scrolling:
function toggleFold(index) {
let $fold = $w( ‘#fold’ + index);
let $arrowDown = $w( ‘#arrowDown’ + index);
let $arrowRight = $w( ‘#arrowRight’ + index);
let $scrollMod = $w( ‘#headerBox’ + index).scrollTo();
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
$scrollMod
else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
The idea was that this would make the page scroll to the top of each header during the toggle of the fold as in the example. However, when I try this (or by adding in individual functions to the on-click events) the scrolling doesn’t appear to work properly. It’s almost as if the page will scroll to where the headerBox was, and not where it is after the menu open up? Or perhaps I have not implemented the function correctly?
The scrolling seems to work perfectly if I open up my menu in reverse order weirdly.
I would really appreciate any help anyone could give me to make this work or if you have any advice for how I could do this better.
Thank you,
Adam