Anchor links are as old as the web itself, but still a very useful organizational tool. In this tutorial, we’ll modernize the behavior of anchor links using the “Page scroll to id” WordPress plugin.
Anchor links differ from standard HTML page links. A standard link takes the visitor to the top of the target page. Anchor links take the visitor to a specific location on a page. You mark that location on the page using an anchor tag.
So an anchor link has two parts: the link itself, and the anchor that tells the link where to go.
In most web browsers, clicking an anchor link “jumps” you immediately to the anchor location. There’s nothing wrong with that, that’s how they were designed to work.
But what if we could replace that abrupt jump down the WordPress page with a smooth scroll? The scroll has a more modern feel, and it lets the visitor know that they’re still on the same page, just moving to a new location.
To achieve that effect we’re going to use the Page scroll to id plugin.
Installing the Page scroll to id Plugin
Log in to your WordPress admin panel.
In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.
In the “Search plugins…” box, enter “Page scroll to id.”
Once you have located the plugin, click the “Install Now” button.
Click the “Activate” button.
Using the Page scroll to id plugin
The plugin is working as soon as it’s activated. There are some configuration options though, which we’ll talk about later.
As I mentioned, anchor links have two parts, the links, and the targets. You can recognize an anchor link by the hashtag (#) in the link.
For example, this link is pointing to an anchor named new-section:
Skip to the <a href=”#new-section“>new section</a> to continue.
The anchor tag, which is placed just above the section of the page we’re targeting, looks like this:
<a id=”new-section“></a>
Let’s take a look at how we create links and anchors using the plugin.
Creating a Scroll Link
Creating a link in the WordPress Gutenberg editor:
Open a page or a post in the editor.
Select the text that will become the link.
Click the link icon.
The field to enter the URL will pop up.
Enter the anchor name, starting with a hashtag.
Click the “Apply” icon.
Creating a link in the “classic” WordPress editor:
Open a page or a post in the editor.
Select the text that will become the link.
Click the “Insert/edit Page scroll to id link” icon.
A “Page scroll to id link” window will pop up.
Enter the anchor name, starting with a hashtag, in the “URL/id (e.g. #my-id)” field.
Click the “OK” button.
Creating Anchors (or Targets)
Creating an anchor tag in the WordPress Gutenberg editor:
Open a page or a post in the editor.
Go to the location on the page where you want to insert the anchor.
Above the block that you want to link to, click the “Add block” icon.
In the “Layout Elements” section, click the “Page scroll to id” block.
Enter the anchor name. Don’t add the hashtag here. That’s only used for the link.
Save or update the page or post.
Creating an anchor tag in the “classic” WordPress editor:
Open a page or a post in the editor.
Go to the location on the page where you want to insert the anchor.
Place your cursor at the beginning of the paragraph or section that you want to link to.
Click the “Insert/edit Page scroll to id target” icon.
A “Page scroll to id target” window will pop up.
Enter the anchor name in the “id (e.g. my-id)” field. Don’t use a hashtag this time. That’s only used on the link.
Click the “OK” button.
Save or update the page or post.
The Anchor Link on the Page
Now when you visit the page, the anchor link to scroll to the id is there. Clicking it scrolls you smoothly down to the anchored section.
I would demonstrate the wonderful smooth scroll action for you, but we’re working within the limitations of static images here.
How to Adjust for a Site With a Static Navbar or Header
If there is a navbar or other top-of-page element on your site, you may need to make an adjustment.
Anchor links will display the target text at the top of the browser window. So if you use, say, the WordPress admin bar, the first line of text can be cut off.
We can fix that by setting an “offset.”
In the left column navigation, mouse over the “Settings” link and click the “Page scroll to id” link.
Scroll down to the “Offset” section.
I happen to know the height of the WordPress admin bar is 32 pixels, so I’m going to enter 32 as the number of pixels I want to offset. You may have to experiment to find the perfect offset for your site.
Scroll down to the bottom of the page and click the “Save Changes” button.
Now when I click the anchor link the target text is all visible.
Further Configuration Options for Page scroll to id
Your anchor links should be working now. But there are a couple of interesting configuration options.
The Selector(s) section should be left as-is unless you’re good with CSS and have reason to change the default.
You can experiment with Scroll duration, Scroll type/easing, and Scroll behavior. Who knew there were so many different types of scrolling?
If you do change scroll settings, try not to do anything too weird. Web users have certain expectations when it comes to scrolling, and you don’t want to distract them unnecessarily.
There are a lot of other configuration settings, but they are mainly for advanced users. I found the plugin performs very well using the default settings.
What Happens if You Uninstall the Page scroll to id Plugin
If you uninstall the plugin, pages and posts that used the plugin will be affected.
- Links and anchors created by the plugin will no longer work.
- The plugin shortcodes (we didn’t talk about shortcodes, but they’re available) will stop working, so the shortcodes themselves will be displayed anywhere they were used.
Back to the Basics
It may seem a little outdated to publish a tutorial for a WordPress page jump plugin. Anchor links are ancient technology, yes. But they’re still great organizational tools, and they aren’t used as often as they were back in the last millennium.
So why would anyone bother?
Well, there are a lot of usability and user-experience reasons. But as a website owner, I would guess that you are concerned with SEO. And you probably know that internal links (links from your site to your site) contribute to good SEO.
There you go. More internal links = better SEO.
You may find it’s easier to create anchor links than to find related pages on your site to link to. That can be especially true if you post a lot of long content.
In any event, now you know how to make those anchor links stop jumping and start sliding and gliding. And being smooth is always a good thing in my book.
Do you use anchor links on your website? If not, why not? Do you think installing a plugin to modify their default behavior is worthwhile? Let me know in the comments.
Author: Michael Phillips
Michael Phillips is a web hosting industry veteran, helping people make the most of their web presence since 1995.
