How to link to a specific part of page
Apr 28, 2020
When you write long blog posts, it can be super useful to create a set of links to specific parts of a page, so your visitors can "jump" to a specific piece of content. It's also useful to use a link to a specific part of a page when you create a pin for a specific piece of content.
I never seem to remember how to do this, so I thought I'd create a short blog post to explain how it works for myself and all of my readers!
What I mean by linking to a specific part of a page, is that you create a link inside the text, and when a reader clicks on that text, he will jump to the section of the page that is mentioned in the link text. Like this link to the bottom of the page for example
What you need in order to create a link to a specific part of a page
You need to add two pieces of html to your blog:
- One piece indicating the position inside your blog post or page where you want the reader to jump to.
- One piece being the link itself (the piece of text that the reader will click on).
Step 1: Create the code for the position you want your reader to jump to
This step consists of three sub steps:
- Come up with a name for the position you want your reader to jump to inside the page. Use a name that will help you distinguish between various positions in the text. If you have only 1 "jump link" in the text, then any name will do. In my example, I will call it "bottom_text", because I want my reader to jump to the bottom of the text.
- Add a piece of html code around the name like this:
<a name="bottom_text"></a> (in your case, replace "bottom_text" by the name you chose for the point you want your reader to jump to in the step above.
- Put that piece of code inside your blog post or page, right at the position you want your reader to jump to. You need to do this in the html editor of your blog. If you use wordpress, this is where you find the html editor:
Insert the piece of code into the html and your first part is all done.
Step 2: adding the link
I hope the first part wasn't too hard? Here's the second one, which is even easier:
- Come up with the text you want to use in the link. This is called the link text. In my example, this is: link to the bottom of the page
- Go back to the html editor and add the following code around the link text: <a href="#position_name">link text</a> .
- Where "#position_name" is by the name you used for the position you want to jump to as created in step 1 above. In my example bottom_text, starting with a hashtag, so "#bottom_text"
- And where link text is the link text you came up with in step 2.1 above, in my example link to the bottom of the page.
- In my example I end up with: <a href="#bottom_text">link to the bottom of the page</a> .
- Add that using the html editor right where you want the link to appear in your text.
And that's it, whoop whoop! Now, if you want to directly link to that piece of the blog post that you let your users jump to (for example with a pin or a social media post, then you can right click on the link you've created (in my example link to the bottom of the page and click "copy link" or "copy link address" and you will be all set!
That's it! How to jump inside a blog post. Now go and try it :-).
Like this post? Share it with the buttons on this page, or pin it using the pin below:
Sign up for the roundup
Want to stay up to date on my new blog posts, free trainings and videos?
Sign up for my weekly round-up, a once-a-week overview of all the good stuff I put out into the world!