Axure Tutorial: Make Scrolling to Widget Effects (Anchor Link)

Introduction

When using Axure, we often need to use the scrolling to widget effect, but when doing it, there are several details that are easily overlooked. I summarizes some problems encountered when using Axure to do anchor scrolling, and shares the steps of its making, let’s take a look.

Features to be realized

As shown in the above figure, we need to realize two features:

  1. click the link text on the right side of the screen to scroll to the corresponding page position.
  2. when scrolling on the screen, select the corresponding text according to the scrolling position.

Widgets Setup

1. First, prepare the long page to be scrolled, then add the hotspots to the corresponding position as an anchors. Note that when window scrolling, the screen will scroll to the top position with the hotspot’s Y value. So the part above the hot spot is invisible.

2. Then make text links for scrolling. We have added 6 hotspots, so we need 6 text links; Set their selected style and set their selection group.

Interactions Setup

Click the text link, screen scrolls to the corresponding position

When the text link is clicked, select the text and scroll to the corresponding hot spot.

When the screen scrolls, select the corresponding text link

We need to set the event when the screen scrolls. According to different Window.ScrollY value cases (6 cases in total), select the corresponding text link.

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 10 or up).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store