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

1. Main Content Area

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.

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

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.