Anchor Links are one of the default interactions available in the Experience Canvas. You can use these anchor links to scroll to a different section in your experience, or even between two separate experiences.
To create an anchor link, you simply need to use any two Widgets of your choosing. One will serve as the "Trigger Widget" that someone can click on to make the scrolling occur and the other will serve as the "Point Widget" marking the point on the page that someone will be taken to when the scrolling occurs.
Place your Trigger Widget into your Experience and then click on the Interact tab for that Widget. Once in there, select the "Jump to Page Element" Action like so:
This will show the "CSS Selector" field, and in there, enter anything you'd like as long as that Selector starts with a period and does not have any spaces in it (like in the example just above here).
Next, place your Point Widget into your Experience and click on the Design tab for that Widget. Inside that tab, scroll down until you see the "Custom CSS Classes" field:
Click the plus sign on that field and a text box will appear. Paste the same CSS Selector that was used on your Trigger Widget into here, but be sure to remove the period from the front of it:
Save your Experience, Push it, Publish it, and the Anchor Link should work as expected in your live Experience from there! Here is an example of that in action:
https://zmags.myshopify.com/pages/new-editor-anchor
Please contact support@getfastr.com with any further questions on this!
Comments
0 comments
Please sign in to leave a comment.