Link to a spot on a page

[from https://premium.wpmudev.org/blog/link-to-any-spot-in-a-wordpress-post-with-page-jumps-bookmarks/]

The Link

The link code will need to take this form:

<a href="#unique-name">Your Link Text</a>

You need to create a unique name for your page jump link and place that in your coding. Notice that you also need to use a hashtag (#) before the name.

Example

So, for example, let’s say we create the unique name “music-history” for this particular page jump link.

<a href="#music-history">Your Link Text</a>

Then, of course, you can make your visible link text say whatever you like. I’m going to use “Music History Section.”

<a href="#music-history">Music History Section</a>

 

Target (landing spot)

The target (the spot where you’re jumping to) will need to take the following form:

"<a name="unique-name">Target Text</a>"

Or, you can do without the text, and simply place the code in your editor.

"<a name="unique-name"></a>"

Example

In the example above, I made my unique name “music-history,” and so I need to name my target the same (however, there is no need for a hashtag # here).

"<a name="music-history">Music History Section</a>"

Or, if I’ve decided not to use text, it would look like this:

"<a name="music-history"></a>"

 

***Note:

You may decide not to use text because often when you jump to a spot  on your site, a tool bar or something else at the top might cover up the actual beginning spot you want your visitors to see.

The way to get around this is to put the “target” just ABOVE the spot you actually want your visitors to begin.

For example, if I want my visitors to see my heading labeled “Music History Section,” I might find it’s better to use the coding like this:

<a name="music-history"></a> Music History Section The history of music traces back ….

Linking to Specific Spots on Other Pages

Once you set up these page jumps and test them out, you will notice that when you jump to a target, the URL in your browser changes to reflect exactly where you are.

For example, if your main page is mysite.com/music/, and you jump to your “music history” target, your URL will now show as mysite.com/music/#music-history.

Because of this, you can also set up links between pages and go directly to the spot on the page that you want.

For example, if you had a post on your site about all your interests, and you wanted to link to the “Music History Section” of your “music” page (mysite.com/music/), you would link directly to that spot: mysite.com/music/#music-history.

No comments yet.

Leave a Reply