Artwork by Simona Toader
If you are looking to improve the experience for visitors navigating through your site, you may want to consider applying anchor links to your design. Anchor links not only serve to make the navigation easier within the page, but they can also serve as a good overview of the content within your design.
Anchor (aka “Scroll To”) links allow you to connect a trigger on one page element that scrolls to another element on the same page. Some places you may have seen these anchor links in practice are scroll to top buttons or table of contents links within a page.
In this article, we’ll take a look at five useful and creative ways we can use anchor links in Adobe XD using the Scroll To action in your prototypes. Before we dive into these options, let’s first take a look at how the Scroll To action works.
How to create an anchor link in Adobe XD
XD has many interactions you can use to enrich your prototypes. The Scroll To action lets you connect any element to a certain position within the same artboard. You also have the option to change the duration of the scroll and set a Y-Offset or the amount of spacing above or below an element you want to scroll.
To make use of this feature, we first want to go to the Prototype tab so we have the correct properties to work with. Now you can simply click on the element you want to use as the trigger and drag a connection between that element and the desired element you want to scroll to.
Once this connection is placed, you have an on-canvas drag handle where you can offset the spacing above or below where you want to scroll if you don’t want the element sitting right on the top of the page.
Additionally, if you want to play with the easing of the scroll animation you have a few options as to how this animates. For more natural scrolling, I like to use Ease Out, but play around with these other options as it might fit the unique style of your design better.
Using the Scroll To action is very simple, but how you use this feature in your design can really enhance the user experience.
Creative ways to implement anchor links in your designs
Create a navigation for landing pages or single page layouts
Anchor links can greatly enhance the experience of landing pages or single-page websites. Using anchor links, you can combine the benefit of having more content on a single page and still allow visitors to quickly navigate to the sections they find most useful.
When designing this navigation you can also pin the links to the top to make these anchor links easy and quick to access regardless of the scroll position on the artboard.
To create this scrolling navigation, enter Prototype mode. Select the first link in your navigation to apply a Scroll To action. As you drag the blue arrow from this link to the element you want to scroll to, XD automatically sets the action as Scroll To in the Properties Inspector.
Now this anchor link is set up and ready to go. If you want greater control over the scroll duration and the position the scroll ends on, update the settings in the Action section of the Properties Inspector.
The properties you apply on the first link are persistent and can easily be applied by default to subsequent connections, so it's faster to link the other menu items without having to set the same properties each time. Repeat the process to add anchor links to the remaining menu items.
The final step is fixing the navigation bar to the top of the page when scrolling, so it stays in the same location, no matter if you've scrolled on the page. Select the navigation bar and then, in the Properties Inspector, enable Fix Position When Scrolling.
Once everything is set up, preview the results by clicking on Desktop Preview or using the keyboard shortcut Command + Return on Mac or Control + Enter on Windows.
Create a scroll to top button to quickly jump to the beginning of the page
A scroll to top button can be very useful to jump back to the top of the page -- no matter how far down you scroll. This quickly reorients your visitors to begin viewing from the top, in case they skipped over something important or simply want to access the main navigation at the top of the page. This button is usually fixed, floating near the bottom of the page and sitting above all other content.
Design scroll to top buttons that match the style of your prototypes. You can even add a hover state to the button, if desired, to provide a clearer visual cue for visitors.
Once your button is designed, navigate to the Prototype tab and connect this button to scroll to the top of the page. Also, as we did with the navigation bar, enable Fix Position When Scrolling in the Properties Inspector to make sure the button stays in place as the rest of the page scrolls.
Now you have an interactive scroll to top button that you can reuse on many pages to help your visitors navigate back to the top more quickly.
Link Call to Action buttons to a specific area on the page
Perhaps one of the most important elements on a good landing page is the Call to Action, the action that you encourage your visitors to participate in. If you are designing a landing page with the goal of signing up for a mailing list or receiving donations, you might want to think about designing a form at the bottom of the page rather than take up space near the top, where you want to display important information.
Some visitors may not need to read the top page information because they're ready to sign up now. Using anchor links on Call to Action buttons gives you the best of both worlds: you can add Call to Action buttons in many sections of your site and set them up to all scroll to the same sign up form.
In the example above, there's a Donate today button in the main navigation area. The Donate today button is linked to the donate form at the bottom of the page. Because the main navigation is fixed when scrolling, this Call to Action is available for visitors to engage with at any time as they scroll down the page to read the information on the site.
Add a scroll interaction to referenced material
When designing pages that include information that need to be referenced for further information, you can create Scroll To interactions for visitors to click on the corresponding link and scroll down to the references at the bottom.
This type of interaction is similar to the behavior on Wikipedia’s website, where highlighted text or reference numbers are linked to the reference section of the page.
To create this in XD, you can select the element in your design you want to reference, in this case the reference number, and connect it down to the section that displays these references. Now your visitors can quickly jump to find out more about any piece of content on your page.
Create an interactive table of contents
Table of contents work very well when designing resource pages or a blog with many categories or sections. This table of contents can serve two purposes. Visitors can get a quick overview of the content featured on the page and they can also click to jump to specific sections without having to scroll down manually.
In the example of Adobe’s support website, we can create a sidebar that hosts links to many sections of a second page. This sidebar can stay fixed on the page while other content scrolls to the desired location. This allows visitors to quickly jump between sections to find answers to specific questions.
To create this interactive table of contents that remains in a fixed position on the page, select the grouped navigation and enable Fix Position When Scrolling. Otherwise, move on to the next step to connect each link to the appropriate section.
Preview your prototype and click on the links to test the scrolling behavior and make sure all links are anchored correctly.
Anchor links are used everywhere in websites and applications. You'll see them applied to scrollable tabbed navigation on mobile devices and throughout many website experiences. The examples described in this tutorial only scratch the surface of what's possible with anchor links. As you you browse third-party websites and apps, pay attention when anchor links are used to learn new strategies that you can incorporate into your XD projects.
Create anchor links with the Scroll To action applied to make buttons and text links that jump directly to various sections of your layout. Experiment by adding anchor links to your XD prototypes and see how quickly you can improve your visitor's ability to navigate information.
