Would you please kindly advise if it is possible within Wix code to associate a single button or element to multiple anchors in a particular order so that each time the button is pressed it goes through that order in page and moves to the next available anchor/stop if there are any or is “disabled” if there are no longer any further values. I want to have an identical button that does the reverse of this as well. In my head this would be a pinned duo.
currently, the only way I can do this is add such previous/next button repeatedly through out my longer and anchored page.
The $w selector can also return multiple elements. So $w(‘Anchor’) will return all the anchors on the page
So assuming your button is called ‘nextButton’, and you have (through the properties panel) wired its click event to nextButton_onClick - your code should look like so:
var allAnchors;
var currentAnchorIndex = 0;
$w.onReady(function () {
allAnchors = $w('Anchor');
});
export function nextButton_onClick(event) {
currentAnchorIndex++;
allAnchors[currentAnchorIndex].scrollTo();
}
Hi, I’ve successfully added a “next” button by using your code, but how would the code change if I want to also add a “previous” button to go back to the previous anchor?
My knowledge about codes is very basics and I have some questions about the code provided:
var allAnchors; (What is this? What I need to insert here? Where I can find?)
var currentAnchorIndex = 0; (I need to change “currentAnchorIndex” and the number “0”? With what? Where I can find?)
$w.onReady(function () {
allAnchors = $w(‘Anchor’); (I need to change “allAnchors” and “$w(Anchor’)”? With what? Where I can find?)
});
export function nextButton_onClick(event) {
currentAnchorIndex++; (I need to change “currentAnchorIndex”? With what? Where I can find?)
allAnchors[currentAnchorIndex].scrollTo ();(I need to change “allAchors” and “currentAnchorIndex”? With what? Where I can find?)
}
Hi,
Here’s an explanation of the code shared by Uval:
var allAnchors; //Variable declaration.
var currentAnchorIndex = 0;
$w.onReady(function () {
allAnchors = $w('Anchor');
//$w('Anchor') returns an array of all anchor elements of the page.
//This command saves the anchor elements information
//to the allAnchors variable.
});
export function nextButton_onClick(event) {
//increase the current anchor index by 1
currentAnchorIndex++;
//In order to scroll to the anchor, we get the relevant anchor from the
//array and scroll to this anchor
allAnchors[currentAnchorIndex].scrollTo();
}