Create Anchor Links

Loes Knetsch ©

You generally use links to go to another page. But you can also link to places within a page,
with Anchor links. Here is how to insert anchors without using a plugin.

Jump anchor link


Why would you do that

With a table of contents, you, as a visitor, can immediately see what can be found on this page. From the menu, you can jump right away to the section.

My example menu:

How does it work?

How do you do it?

Step 1: Create the anchor

Step 2: Link to the anchor

Step 3: Link from other pages

Step 4: Example codes

Step 5: Back to the top anchor link

Step 6: Using Gutenberg

Step 7: Title not readable after scrolling

When every title is a link, you immediately get to the info, without scrolling and searching.
Visitors with a smartphone or tablet do not scroll quickly to scan titles. In this way, you give them a quick overview.
Link to a specific item in another page, that, of course, is also possible. With the way, I explain here, you need to have access to the text editor of your post or page to be able to place the HTML ID codes.

 

How does it work

The title “How does it work?” gets the anchor attached to it and the text in the menu gets the #link

Here comes this code, attached to How does it work?

<h3 id = “How does it work?”>How does it work?</h3>

The principle:
To be able to link to a text further down a page, the target, that text must become an anchor.
Then you make the link, to the unique anchor that you just made.

 

How do you do it?

So you need two things: place an anchor (link target) and ad the link to it.

Again, here comes the anchor attached to How do you do it?

<h3 id = “How do you do it?”>How do you do it?</h3>

Placing anchor links becomes child's play for you ~ Loes Click To Tweet

 

Step 1: Create the anchor

Format your text. Specify styles; this header above of step 1 is “Header 3”.

If you don’t see the style picker, click on the right-most symbol in the icon bar, the “sink”. You will then see the second row of icons, with the style selector on the left.

For example, the header of this paragraph looks like this:
<h3>Step 1: Create the anchor</h3>

To make it an anchor, you have to copy and paste this code into the text tab:
<h3 id = “Step 1: Create the anchor”>Step 1: Create the anchor</h3>
the id tag, behind it the = sign, and between double quotes has to be identical to the header name.
Now you have the anchor to which you can link.

 

Step 2: Link to the anchor

Select the text (an image can also be) that link should be and click on the chain symbol. Specify the unique name of the anchorage just created, with a # in front.

The Easiest Way To Create Anchor Links On The Same Page

 

Step 3: Link from other pages

You can also link from other pages. On that other page, select the text or image that should be the link and click on the chain symbol.
Select the page you want to link to in the list. Tap after the slash / a # and immediately the name of the anchorage (without spaces).

The link will look like this:

https://workathomefuture.com/create-anchor-links-same-page/#Every title is a link

Every title is a link

I have added this link here, but you can use this from any page to link back to a particular paragraph title.

 

Step 4: Example codes

This code you add to your paragraph title.

<h3 id = “Your Title”>Your Title</h3>

And this link you add to your link menu on top of your post using the link button

#Your Title

 

Step 5: Back to the top anchor link

In between the paragraphs, you can also add a “Back to Top” link, for the convenience of your audience.

These are the links you can place in your editor to create the back to top links.

Place this code on top of your post:

<a name=”Anchor”></a>

And this code is for the button in between the paragraphs:

<a href=”#Anchor”><button name=”button”>Go to Top</button></a>

 

Step 6: Using Gutenberg

When you are using the Gutenberg editor, it might be different. You can disable the Gutenberg editor temporally with a plugin. To get access to the old-school editor again. I am using “Disable Gutenberg” by Jeff Starr.

 

Step 7: Title not readable after scrolling

Because I have a Top Bar notification, I have adjusted my anchor links a bit, so the title is visible after the jump. My code looks therefore like this. How to let the anchor link stop at the right place? Use the &nbsp; HTML code in between, that gives a little more spacing between the anchor and the title.

<h3 id=”Step 7: Title not readable after scrolling”></h3>
&nbsp;&nbsp;
<h3>Step 7: Title not readable after scrolling</h3>

 

Related posts:

(Visited 37 times, 1 visits today)

Hey, nice to meet you. I am Loes and I love to work, create and make money on the internet. My vision for the future is promising because the activities and sales go to triple over the next few years. You can take advantage of it too. Step into the world of affiliate marketing today, and work towards financial freedom for you and for your family. If you would like to learn how to build your own Wordpress website, click here to open your free account today!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>