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.
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.
Every title is a link
My example menu:
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>
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?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.
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
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
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:
And this code is for the button in between the paragraphs:
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 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>
<h3>Step 7: Title not readable after scrolling</h3>