Navigating to an anchor in mobile

Ask the community
,
1

Please how do I navigate to anchors in the mobile version of my site with button clicks. I used the method wixWindow.scrollTo(X,Y), but this is only for element positions that are fixed, the element positions could change as the elements above them can be collapsed.

2

Hi!

Try out:

export function button1_click(event) {
  // Get the element with the specified ID
  let element = $w("#anchor1");

  // Scroll the element into view
  element.scrollIntoView();
}
3

Inorder words $w(‘#anchor1’).scrollIntoView()…?

4

This method does not work .

5

Hello, I just tested this and it is working as expected for me. I used the following code and on page load with the element collapsed, the page scrolled to the location of that element.

I copied this code exactly from the API docs with no modifications

$w("#text4").scrollTo()
  .then( ( ) => {
    console.log("Done with scroll");
} );
6

The idea is to scroll to the same element (on button click) when the element shifts out of position because of collapsible and expandable elements above it, did it work that way? because as far as I know the scrollTo() method doesn’t do well in this instance.

7

All I can recommend is to test it for your use case. If the expand/collapse happens after the scroll - then, yes your position will be lost if this movement causes the page to move.

So perhaps you need to work on some code that awaits the scroll until after all the other actions have happened. wdyt?

8

What I want to achieve through a button click is to scroll to a specific element no matter time while viewing the page and no matter the new position of the element. It should just go to that element.

9

Then the code I provided should work (using scrollTo). I’ve not had any issues using it for that purpose before and it is working for me now. I am sorry I am not able to recreate your issue.

10

Just tried it and it works perfectly well.

11

Is there also a way to zoom the element with code?