Links to other pages on your website or to external sites are easy enough to create, but sometimes you want to jump to the same part of the same page. This tutorial shows how to do it with and without a plugin.
One page websites have become popular and everything is contained on one long page. At the top might be a menu of buttons to go to the various sections, but they don’t take you to different pages, they just jump further down the same page. How is this achieved?
That is great for sites that sell just a few products or services, but a one page website is no use for bloggers with lots of content.
Sometimes you want to link to different parts of the same page. For example, suppose you have created a mega 3,000 word guide to something, you might want to put links at the start of the article to act as a sort of contents. This enables people to jump to the section that interests them.
Here is an example, go to Page scroll to id plugin. Click the back button or simply scroll back up to page to continue from here. How does it work?
WordPress cannot do this on its own and you have to manually enter the code. However, it is quite straightforward.
Name link target
Switch to the Text tab in the post editor and find the place you want to send people to when they click a link. Enter:
<a name=”any-name”>The text to link to</a>
In the example link above, I link to a heading called Page scroll to id. So on the text tab I entered:
<a name=”page-scroll”>Page scroll to id</a>
Basically you name the destination using a bit of HTML – any name will do, but the usual rules for links applies, so do not include spaces. I named mine page-scroll, but yours will be different.
Create the link
Now go to the text you want to turn into a link, such as a contents list at the start of a long article. It is just like creating any link in WordPress. Click the link button in the toolbar and enter the link name with a # in front like this:
So instead of entering a full URL, you enter #link-name instead. You can create as many internal links on a page as you need provided they all have different names.
It is very useful for tables of contents.
Page scroll to id
The only code you need to enter is the name tag, so it is not difficult. However, is there a simpler way? There is a plugin called Page scroll to id that can be used instead. It has 70,000 installs and was recently updated, which is always a good sign.
The advantage of this plugin is that instead of jumping to the destination, it offers a bunch of extra features, such as smoothly scrolling the page and takes the reader to the destination in a more visually attractive manner.
- Go to Plugins in the WordPress sidebar
- Click the Add New button
- Search for ‘page scroll to id‘
- Click the Install button next to the plugin
- Click Activate to enable the plugin
There is now a new button in the WordPress post editor toolbar.
Go to the target – the place in the article you want to link to – and click the Page scroll to id button. Type the name of the link.
Page scroll to id only creates the named target. The link is created in the same way as described above – click the Link button in the WordPress toolbar and set the URL to #link-to-here or whatever you called the target link.
This smooth scrolling effect works best on really long web pages where there is plenty of content to scroll through. It isn’t needed if the link and target are only a few paragraphs apart.
Go to the WordPress sidebar and click Settings > Page scroll to id to customise the settings, such as the scroll speed and a bunch of other things.
