Axure Tutorial: Clicking Tab to Scroll to Widget
Introduction
In pages with a lot of content such as e-commerce or contacts, we can often see floating tabs. Click these tabs to scroll the page to the corresponding position. Today we will learn how to realize this feature.
WIdgets Setup
The main content area includes the headers and contents. We make 3 header and three contents.
2. Floating Panel
The floating panel includes 3 buttons and background. Make it into a dynamic panel. And pinned in the upper right corner of the page.
Interactions Setup
Set the selected style of tabs and set its selection group to Header.
When the tab is clicked, scroll to the corresponding header control, and set 500ms animation.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Note: Click here to download the completed RP file for this tutorial (RP 9 or up).
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.
Leave a comment