By Howard Pinsky
Hey everyone, I'm Howard Pinsky and in today's Adobe XD tip, we're going to take a look at creating a back-to-top interaction, similar to the one I showed off during my video on anchor links. Let's dive in.
On this landing page, in addition to the links that take me down to the various sections I've laid out, I may want a button to shoot me back up to the top. Design-wise, there are many directions we can take this, including an always visible icon, but there may be times where you only want the icon to be displayed after scrolling takes place. Here's a quick way of doing so. First-off, we need said icon. Since we're going with a space theme design. I'm going to grab a rocket from one of my libraries, rotate it, and places towards the bottom of the page, making sure that it's above the fold. I'm also going to quickly change the color to match our design. You know, what let's add a touch of fun to this using a hover trigger. Over within the Properties Inspector, I'm going to hit the + button to turn this rocket into a component. Then one more time to create a new hover state. All I'm going to do now is separate the two pieces a touch, and then enlarge the flames at the bottom.
All right, back to business. Now that we have the icon in place, three things need to be done. First, it needs to be fixed into place so that it's always visible when scrolling. That can quickly be done by checking on fixed position when scrolling over to the right. Second, we need to wire it up. Switching over to Prototype mode, you'll want to drag the blue handle to one of the layers at the top of the page. And, if need-be, you can adjust the Y position so that it lands nice and flush In terms of the easing options, "In/Out" with a duration of 0.6 or 0.8 seconds is usually a safe bet. Finally, it needs to be hidden. If you're using a full width image at the top of the page, you can simply move behind it. Otherwise, we need to get a bit creative. So what we'll want to do is cover up the icon with either an ellipse or a rectangle that matches the color of the background. And, to ensure that it only becomes visible once scrolling takes place, you can extend the shape right down to the bottom of the viewport. You'll also want to make sure that any other fixed element is at the top of your layer stack to avoid dipping behind this shape. Great.
It's time to see this in action. Launching the preview will display everything that was placed within the viewport, and either scrolling or using an anchor link will reveal the newly-created icon where we can hover over it and then click to scroll back to the top.
And that'll do it — a simple way to create a hidden back-to-top interaction using Adobe XD. for more tips and tricks just like this head on over to let sex d.com and I'll see you all soon.
Create realistic single page experiences with interactive back to top buttons in Adobe XD. In this tutorial, Howard Pinksy shows you how to use anchor links in Adobe XD to create an interactive button that scrolls to the top of the page when clicked -- great for prototyping one page experiences and websites.
