How to Add a ‘Jump-to’ or Anchor Link on Your Page
Have a long page but want a way for your website visitors to quickly jump to the content they want to see the most? I had to cross this bridge for a client this past month. We had quite a few pages that needed to be longer and informative but we wanted to provide people the option to skip ahead. Anchor links are the answer for that!
Anchor links or “Jump-to” links, are great and relatively simple ways to achieve that instant skip to the right information for individuals. Not only are they convenient on a website, but they are great when you’re trying to drive traffic to a specific part of your website. Think blog posts, sales funnels, services, price listings, etc.
Now, I won’t lie, there is a bit of coding that needs to go on here, but it is so straightforward, you probably won’t ever code something so simple in your life moving forward. I love anchor links for this, I swear I could do them in my sleep!
Okay, without further ado, here’s how it works:
Anchors Away!
First, we need to put our anchor down. The anchor, as anchors do, quite literally holds something in place.
For example, say on a page I’m talking about selling a membership, and the place to purchase the membership is at the bottom of the page. I would then put an ‘anchor’ where the membership purchase portion is at the bottom of the page, and higher up in the page where I’m referencing the membership purchase, I’d link to the anchor. That way when a website visitor clicks the anchor link, they’d then be jumped down the page to your membership purchase, where your anchor is hanging out.
You can also do this in reverse by using a ‘Back to Top’ button. You would then put an anchor down at the top of the page, and link to it from the bottom of the page.
We can make both images , buttons, and/or text into the clickable link bit, so you can get a bit creative there with what your link looks like. I personally love buttons but it’s completely up to you!
Let’s get to it!
Step 01.
Set your anchor wherever you want your visitors to go with the following code. Click an insert point, then select the ‘code block.’ Remove the content that’s in the code block and insert the following
<div id="your-anchor-link-name"></div>
Alright, now we’ve set our anchor, we’ve got to ‘attach’ our link to the anchor.
Step 02.
Go to the area on your page that you want to link to your anchor. I recommend using a button for a clean look but it depends on your content. For a button, add a button field and add the name you’d like to appear on the button. Add the ‘Clickthrough URL #the-name-of-your-anchor. If you are using a hyperlink, highlight the text you want to be linking to your anchor. Click the little ‘link’ icon and in the text field type #the-name-of-your-anchor.
Want to use a great graphic or image for your link? Create your image first, I suggest using Canva for a simple and user friendly way to go. Then once you have your image, insert it onto the area of your page where your link should go using an ‘image block’.
Then, click over from the content tab to the design tab. In the link area drop in the name of your link again, using a # in front of it.
Click save. Once you refresh your page, go test it out!
That’s it! Two simple steps and you’re a code superstar!!
As always, let me know how you enjoy and use your code!
