How to Add a Jump Link to a Web Page

Adding a jump link to your web page is a useful trick. Most web links take your visitors to another page, but sometimes you want to jump to content within the page. Adding a jump link to your page is quick and easy to do, but it does involve a couple of steps to make it work. Not only do you need a link, you also need an anchor for the link to jump to. In this video we show you how to pull it all together. Got questions? Give us a shout any time and we're happy to help.

Today I’m going to show you how to add a “jump” link into a web page that allows you to jump to another section in the same page. It’s pretty simple, but does require a couple of steps to make it work properly.

Here I have a web page already started, with a couple of headings and a few paragraphs of cat ipsum, because why not?

I happen to be using the Beaver Builder WordPress page builder, but the process is the same whether you’re using another builder, the WordPress editor, or even writing your HTML from scratch.

Let’s say that I want to place a link at the top of the page to allow my visitors to jump down here to this fascinating section about furballs. In order to do that, we need to do two things:

  • First, we need to create an anchor for the link to jump to
  • Then we need to create the link itself

Placing the Anchor

So let’s start by placing the anchor. I’m going to edit this content block, and then I’ll go into the Text view. I want to add my anchor right here at the beginning of the paragraph. I could also put it on the heading if I wanted to do so.

We’ll need an anchor, or “a” tag here. If you’ve written HTML before, you’re probably used to having “href” come next, but in this case we’re going to use the “name” attribute. I’ll call this “furballs.”

Then I’ll close the tag. Notice that there is nothing in between here – that’s because we don’t want this to actually appear on the page. I’ll save this block and it looks as though nothing has changed, but we know that the anchor is really here, hiding right at the beginning of the paragraph.

Create the Link

Now let’s go back up here to the top and create our link. I’m going to just add a new content block here – if you’re using the WordPress editor or regular HTML you could just add the link wherever you want it in your content.

Now I’m going to make a traditional link, but my HREF will be to #furballs. The “hash” tells the browser to link to content within this page. Since we called our anchor “furballs,” this link will jump to that content.

So let’s save the block, then we’ll publish our page and test it out.

Voila! It jumps down the page.

So there you go – the quick and easy way to jump to content within your web pages. I hope this has been helpful. See you next time!

About Matt Rife

Matt has worked on both sides of the tech/design divide. He started his career in IT and worked as a sysadmin and business analyst for more than 10 years before discovering the wonderful world of design. Now he mostly does UX design while dabbling in code and operating systems in his spare time.