Axure Docs
  • Axure RP Reference
  • Axure RP Tutorials
  • Axure Cloud Reference
  • Axure Support
  • Download

›The Basics

The Basics

  • Interactive Button
  • Hiding and Showing Widgets
  • Pass Text to Next Page
  • Anchor Link
  • Embedding Media
  • Full Width Image or Banner
  • Scrolling Region
  • Rotating Carousel / Slideshow
  • Navigation Menu
  • Tooltips
  • Tab Menu
  • Accordion Menu
  • Drag and Drop

Complex Interactions

  • Account Login
  • Auto Tab Fields
  • Blinking Text
  • Dynamically Set Droplist Options
  • Set Text with Droplist
  • Required Fields
  • Scroll Activated Sticky Header
  • Set Dynamic Panel State on Next Page
  • Slider Control
  • Terms and Conditions
  • Timer

Mobile Patterns

  • Swiping Slideshow
  • Toggle Switch

Anchor Link Tutorial

In this tutorial, you'll learn how to create a link that scrolls the page down to a specific widget.


Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

  1. Open a new RP file and double-click Page 1 in the Pages pane to open it on the canvas.

  2. Drag a button widget onto the canvas from the Libraries pane and place it at the top of the page.

  3. Drag a placeholder widget onto the canvas and place it lower down on the page. (The placeholder indicated in the screenshot is located at Y: 2,000.)

2. The Scrolling Interaction

  1. Select the button widget and click New Interaction in the Interactions pane.

  2. Select the Click or Tap event in the list that appears, and then select the Scroll to Widget (Anchor Link) action.

  3. In the Target dropdown, choose the placeholder widget.

  4. Leave Vertically selected for the direction of the scroll, and click OK to save the action.

    Note

    If you'd like, you can add an animation to the page scroll in the Animate dropdown.

3. Preview the Interaction

Preview the page in your web browser and click the button to scroll down to the placeholder.

← Pass Text to Next PageEmbedding Media →
  • 1. Widget Setup
  • 2. The Scrolling Interaction
  • 3. Preview the Interaction
Axure Docs
Stay Connected

Sign up to receive Axure tutorials and news. You can unsubscribe at any time.

Axure
TourEnterpriseCompanyDownloadPurchase
Legal
Customer AgreementPrivacy PolicyGDPRSecurityPatents
Resources
BlogForumLicense PortalAxure Cloud
Support
Learn and SupportGetting StartedReferenceWidget LibrariesAxure RP 8 Documentation and Tutorials
Copyright © 2002–2021 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.