Hi,
I have recently integrated anchors into my site for quality of life purposes, namely with folding elements.
Unfortunately, I am having some issues when my anchor that I am travelling to is far down the page.
The intended result is a smooth transition to the anchor, but the actual result is a jerky snap to the bottom of the page.
This is illustrated in the clip shown, where I first show it working as it should, then what happens when clicking on a fold that is further down the page:
Here is my relevant current code, using the functionality found in a Wix-Code tutorial on folds.
function toggleFold(index) {
let $fold = $w('#fold' + index);
// Store the anchor required
let $anchor = $w('#ncr' + index);
let $arrowDown = $w('#arrowDown' + index);
let $arrowRight = $w('#arrowRight' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
// Scroll to the anchor
$anchor.scrollTo();
$arrowDown.show();
$arrowRight.hide();
} else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[1, 2, 3, 4]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
});
}
The anchor names and numbers match up with the fold numbers, so the index cannot be the issue.
Any ideas?
Was any solution found for this? I am experiencing the exact same issue.
Hi Ido, could you please provide an update? Thank you
Hi Ido, sure thing and thanks for the help.
https://editor.wix.com/html/editor/web/renderer/edit/baa06666-8585-4be7-a9a0-82011c4854d6?metaSiteId=a4c91972-2a76-4d6f-bd7e-9a5767d9d615&editorSessionId=C77B6122-E2CA-4D71-A115-2414670CDF74
Hello Toby,
Please share your editor url here.
Note that it is only accessible by Wix employees.
Hi Sam, thank you for your reply.
The result is still the same having changed the scroll to occur inside a then() after the expand()
Any other ideas? i have tried placing the scroll outside of the functions that handle expansion and contraction, in a .then() statement but the same result occurs.
The first place to look is your expand() call. Since the expand() takes some time to finish expanding (hence the function returns a promise) you should probably use a .then() to wait until the expansion is finished before scrolling to the anchor.