Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Create Page Scroll to ID Elements in WordPress

How to Create Page Scroll to ID Elements in WordPress

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.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter “Page scroll to id.”

search for the WordPress Page scroll to id plugin

Once you have located the plugin, click the “Install Now” button.

click to install the WordPress Page scroll to id plugin

Click the “Activate” button.

click to activate the WordPress Page scroll to id plugin

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 link in the WordPress Gutenberg editor:

Open a page or a post in the editor.

Select the text that will become the link.

select text to link

Click the link icon.

click the link icon

The field to enter the URL will pop up.

Enter the anchor name, starting with a hashtag.

enter the anchor name

Click the “Apply” icon.

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.

select text to link

Click the “Insert/edit Page scroll to id link” icon.

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.

enter the anchor name

Click the “OK” button.

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.

click the "Add block" icon

In the “Layout Elements” section, click the “Page scroll to id” block.

click the "Page scroll to id" block

Enter the anchor name. Don’t add the hashtag here. That’s only used for the link.

Enter the anchor name

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.

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.

enter the anchor name

Click the “OK” button.

Save or update the page or post.

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.

anchor link on page

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.

cut off target text on page

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.

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.

enter an offset value in pixels

Scroll down to the bottom of the page and click the “Save Changes” button.

click the "Save Changes" button

Now when I click the anchor link the target text is all visible.

target text on page

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.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.