"Next" Functionality For 1 Element/Button With Page Anchors?

Ask the community
,
1

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.

2

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();
}
3

And this should work just fine on a dynamically generated page right?

4

yes, it works for any page with anchors.

5

Thanks

6

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?

7

Hey guys,

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?)
}

Thanks in advance!

8

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(); 
}

I hope it’s clearer now.

Best,
Tal.