This tutorial walks through how to create anchor links. Use them to automatically scroll to a specific position on a page or include a ‘back to top’ type button at the bottom of a screen.
If you’d like to set up scrollable areas within a prototype, you can use scroll containers. To set an anchor link within one of these scrolling containers, use the
scrollTo(); function outlined in this help article: Scroll Actions and Events.
Here is a sample for this tutorial, which you can copy into your own account: https://app.atomic.io/d/fV3VLaomqcwK
Step 1: Set the page size
Adjust the height of your page so it includes all the elements you wish to scroll to, including those “below the fold”. In the sample for this tutorial, the canvas is 1024 x 2300 pixels.
Step 2: Add the scrollTo script
Add an action to the element you would like to use as the trigger for the anchor link. For example, select a button or link element on your page and select the ‘Click or Tap’ event for the trigger.
scrollTo(["Page 1", "Section 1"]);
Edit the script to work for your page and elements. Change “Page 1” to be the name of your page in the Pages panel. Change “Section 1” to be the name of the element you want to scroll down to (as it appears in the Layers panel). Ensure the element you are referencing has a unique name so the script knows which one to link to. If necessary, rename your element in the Layers panel so other element has the same name.
All element types except groups can be targeted. If you would like to target a group you can convert it to a container by selecting it and selecting the “Convert to Container” button in the properties panel on the right.
Tip: If no element exists in the position you want to link to you can create one (a rectangle or line for example) and set it’s opacity to zero so it is invisible.
Scrolling back to the top of the page
If you want to provide a ‘Back to top’ type link, repeat the steps above, but change the target element to be one that is at the top of your page, like a header, nav bar or status bar for example. E.g:
scrollTo(["Page 1", "Header"]);
Step 3: Preview
Test things out in preview mode (by selecting ‘Preview’ down the bottom right, or keyboard shortcut Cmd + Enter).
In our sample we used a click on a button as the event that triggered the
scrollTo action, but you could also use a different gesture (like a swipe), a component or variable change event, a page timer event or a webhook received event.
Watch an intro video to adding actions here: Adding Interaction.