This tutorial shows you how to create anchor (jump) links that let you scroll to a specific point within a page. It uses the Image Map Region widget, OnClick event, and "Scroll to Image Map Region" action.

Anchor Links

Basic Interactions Tutorial

Dynamic Scrolling with Links

Ahoy matey! You've dropped anchor links and now it's time to set sail to more advanced prototyping techniques.

First, open AnchorLinks.rp and open the "Anchor Links" page.

In this example, we want to click on Question 1 and jump to the answer for that question.

Drag and drop an image map region to the top of the first answer ("1. Q: I would like to return my purchase. What do I do next?").

While the image map region is selected, go to the top of the Widget Properties pane and label the widget "Q1". This will help us identify the image map region when adding interactions later on.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

(AxureAnchorLinks.zip)

This zip file contains the RP file needed to complete this tutorial

Next, select the text panel for the first question at the top of the wireframe. Select the OnClick event and click "Add Case", or double-click the event. This opens the Case Editor dialog.

In the Case Editor dialog, click "Scroll to Image Map Region" in the list of actions on the left. Then, check the box next to Q1 (Image Map Region) on the right. Click "OK" to close the Case Editor.

Now, let's add an Image Map Region to to the top of the page to create a "Return to top" anchor link. Label this widget, "PageTop" in the WIdget Properties pane.

Below the answer for question 1, select the text panel that says "Return to top".  Add an OnClick case to scroll to the "PageTop" image map region.

Generate the prototype and you'll see that clicking on the first question jumps down to its answer, and clicking "Return to top" under the answer takes you back to the top of the page.

Step 1: Add an Image Map Region widget

Step 2: Label the widget

Step 3: Add an OnClick case to Question 1

Step 4: "Scroll to Image Map Region"

Step 5: Add an Image Map Region to the top

Step 6: "Return to Top"

Next: Dynamic Panels (Basic) Article

Back to Basic Interactions