How to Create a Page Scroll to Identifiers in WordPress

Anchor links are as old as the web itself but are still a very useful organizational tool. In this tutorial, we will 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. How to Create a Page Scroll to Identifiers in WordPress.

You mark this location on the page with Afghanistan B2B List 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 immediately “throws” you to the location of the anchor. There’s nothing wrong with that, that’s how they were designed to work. How to Create a Page Scroll to Identifiers in WordPress.

How to Scale a Site with a Static Navigation Bar or Header

But what if we could replace that abrupt jump down the WordPress page with smooth scrolling? The scroll has a more modern look and lets the visitor know they are still on the same page, just moving to a new location. To achieve this effect, we will use the Page scroll to id plugin.

The plugin works as soon as it is activated. There are, however, a few configuration options, which we will discuss later. As I mentioned, anchor links have two parts, links, and targets. You can recognize an anchor link by the hashtag in the link. Now when you visit the page, the anchor link to scroll to the id is there. Clicking on it will smoothly scroll to the docked section.

Using Page Scroll to Id Plugin

Afghanistan B2B List

Anchor link on the page I’ll show you the wonderful smooth scrolling action, but we’re working within the confines of static images here. How to Scale a Site with a Static Navigation Bar or Header If there is a navigation bar 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’re using, say, the WordPress admin bar, the first line of text might be cut off. I 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 need to experiment to find the perfect offset for your site.

Leave a comment

Your email address will not be published.