We proudly present the new scroll-to-element interaction. This new feature is an extension of the existing “scroll page” interaction. It allows you to design interactions that scroll a page to a defined element on that page. This feature has been on our mind for some time, but had not made it on the roadmap yet. Luckily, it was recently requested again by some users and thus got the final push into the sprint backlog.
Pidoco already offered an interaction for scrolling the page to the top or to the bottom. The new feature makes it easier to prototype single page websites which require several scroll anchors. Now you can add a scroll anchor to any stencil on a page to use it as target for a scroll interaction.
Here is how it works
In order to use the interaction you first need to define the stencil which acts as the scroll anchor. Then the interaction can be set.
1. Define anchor element
Select the stencil you want to scroll to, open its context menu and enter a unique name into the anchor name field (e.g. ‘contact form’). You can name it anything you want, but we recommend to name it in a way that allows you to easily identify it from a list of all existing anchor names.
2. Set scroll interaction
Select the stencil, from which you want to trigger the scroll interaction. In the interaction menu, select the ‘scroll to anchor element’ interaction and then select the anchor name from the drop down menu as anchor element.
Watch out! In the drop down, you can only select anchor elements which are placed on the same page as your trigger element. Switching between pages is not intended with this interaction type.
That’s all that needs to be done! We are excited about this new feature and all the new possibilities it offers our users.
What do you think?
Does this feature help your work? What else would you like to see in Pidoco? Leave some feedback and we’ll give our best to improve our tool for you!