Anchor links on same page?

Hello, I’m posting recipes on my Ghost blog. I want to do jump links that link to the recipe at the bottom of the post.

I’ve searched the forum and online and I found the answer BUT I don’t know how to implement it.

I can see that it works on his site but I don’t know how to get it to work on my site.

Can someone please explain in plain English how to do this? I am a former HTML developer and have been blogging on Wordpress for over a decade but I am not very familiar with Ghost.

Thank you

If you add a heading to the section you want to add a jump link to (e.g. “Recipe”) then you can use that heading in the URL to create your link, like this:

yoursite.com/article/#recipe

If the heading has more than one word, use - to separate. Here’s an example from a real site: https://demo.ghost.io/design/#installing-ghost-themes

1 Like

Thanks for your quick response.

I understand how to make the link. How do I add the tag for the heading?

Here is the link I made: https://yoursite.com/test/#mushroomscalloprisottorecipe

Now how do I create the anchor that it links to?

Normally in HTML the anchor looks like this:

Ghost automatically allows you to make jump links with all headings in your posts. You just use the # identifier at the end of the URL to link to a specific section of your article, followed by the heading itself.

You need to swap out yoursite.com/test/ for the actual URL of your post, followed by the heading. If the heading is Mushroom Scallop Risotto Recipe, then it should be #mushroom-scallop-risotto-recipe at the end of the link.

Thank you Kym!

I tried it and it still did not work.

What am I doing wrong? I’m sure it’s something really stupid but I can’t figure it out.

Thank you in advance!

https://www.annmariemichaels.com/easy-mushroom-scallop-risotto/#easy-mushroom-scallop-risotto-recipe

I just tested it using this heading from your post, and it works for me with the above URL.

Are you saying it works for you? When I try to click the link in Chrome or Brave or Safari, nothing happens.

If I hold down the link on some browsers, it will open in a new tab.

Very odd. Is it supposed to do this? How do I make the link automatically click to the link instead of having to hold down?

Thanks.

You need to copy and paste the URL I shared above into your browser to see it jump to the relevant heading within your article.

I shared the link this way to prevent the forum software from turning it into a bookmark card - so you could see how the URL needs to be compiled.

OK thanks. I put it into the browser url bar and it worked. However, it is still not working on my post. How do I add it to the post so it works?

As you can see, I added it twice to the post now – still doesn’t work.

@annmarie you’ve added your heading manually using a HTML card - in that case you won’t have an id automatically generated for you compared to using the built-in headers.

In this case because you’ve given your own id, the internal link would be #mushroomscalloprisotto or if you’re linking from an external site https://www.annmariemichaels.com/easy-mushroom-scallop-risotto/#mushroomscalloprisotto

1 Like