Blog

Master Adding Anchors in WordPress to Create Smooth Scroll Effects

/ by Ava Taylor

Creating a seamless website experience is critical in retaining and engaging your visitors. One technique that plays a significant role in enhancing user experience is the smooth scroll effect, especially in single-page or long-form content websites. This elegant feature is made possible by adding anchors in WordPress. Anchors allow users to jump directly to specific parts of a page without abrupt jumps, thereby providing a fluid navigation experience. In this guide, we’ll walk you through how to properly add anchors in WordPress and implement smooth scrolling, backed by best practices and real-world implementation tips.

What Are Anchors in WordPress?

Anchors in WordPress refer to HTML elements that act as invisible markers or targets within a webpage. When a user clicks a link associated with an anchor, the browser scrolls down (or up) smoothly to the provided location. They are invaluable in guiding users to sections like “Contact Us,” “FAQ,” or “Pricing” without reloading the page.

Technically, anchors are implemented via the id attribute of an HTML element. When you link to #pricing, the browser navigates to the element with id="pricing".

Why Use Anchors with Smooth Scroll?

Anchors provide immense usability value, and enabling smooth scroll boosts their effectiveness. Here are a few benefits:

  • Improved UX: Instead of jarring jumps, smooth scroll offers a gradual transition to the target section.
  • Guides user behavior: Especially in single-page designs, anchors can direct attention in a controlled and aesthetic manner.
  • SEO-friendly: Anchor links are crawlable and can contribute to improved site structure.

How to Add Anchors in WordPress (Step-by-Step)

There are multiple ways to implement anchors in WordPress depending on your comfort level and whether you’re using the Block Editor (Gutenberg), Classic Editor, or a Page Builder like Elementor.

1. Using Gutenberg (Block Editor)

Follow these steps to add anchors with Gutenberg:

  1. Select the block where you want the anchor.
  2. In the Block settings panel on the right, find the Advanced section.
  3. Add an HTML Anchor. For example, input about-us.
  4. Now link to that section with #about-us from any part of the page or menu.

2. Classic Editor

If you’re using the Classic Editor, you can add anchors manually:

  1. Switch to the Text tab instead of Visual.
  2. Insert the anchor by setting an id on an element. E.g., <h2 id="contact">Contact Us</h2>
  3. Link to the anchor using <a href="#contact">Contact</a>

3. With Page Builders (Elementor Example)

Page builders simplify the process even further. For Elementor:

  1. Add an Anchor widget from the Elementor panel.
  2. Name the anchor something descriptive (e.g., services).
  3. Create a menu item or button that links to #services.

You can repeat this process for as many anchors as needed, ensuring all internal links direct users to the right section of the page.

Enabling Smooth Scroll Effect

While most modern themes have some level of smooth scrolling integrated, you might need to implement it yourself if your theme doesn’t support it. Here are a few proven techniques:

Method 1: Use a Plugin

There are several plugins available for smooth scrolling. Some popular choices include:

  • Page scroll to id
  • Easy Smooth Scroll Links
  • Simple Smooth Scroll

To use a plugin, follow these steps:

  1. Go to Plugins > Add New in your WordPress dashboard.
  2. Search for your desired plugin name.
  3. Click Install Now and then activate it.
  4. Configure settings (if any) to target anchor links with a smooth scroll effect.

Method 2: Add Custom JavaScript

If you prefer not to use a plugin, you can add your own JavaScript to enable smooth scrolling:

<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});
</script>

You can add this code snippet either in your theme’s footer.php file right before the closing </body> tag or via a custom JavaScript plugin like Insert Headers and Footers.

Best Practices for Using Anchors and Smooth Scroll

To enhance performance and accessibility, consider the following best practices:

  • Use distinct IDs: Ensure that each anchor ID is unique and follows best naming conventions (e.g., no spaces).
  • Avoid keyword stuffing: Good anchor link labels should be natural and descriptive.
  • Test responsiveness: On mobile devices, fixed headers can sometimes obscure the anchored section. Add offset margins via CSS if needed.
  • Use semantic HTML: Wrap anchor targets in semantic tags like <section>, <article>, or proper heading levels.

Handling Offset for Fixed Headers

One common issue with anchors is content being hidden behind sticky headers, especially on mobile or tablet screens. You can solve this with simple CSS:


:target::before {
  content: "";
  display: block;
  height: 80px; /* height of your fixed header */
  margin-top: -80px;
}

This CSS rule makes sure your anchored sections are visible and not masked by fixed elements.

Incorporating Anchors in Menus

To add anchor links to your WordPress menu:

  1. Go to Appearance > Menus.
  2. Add a Custom Link.
  3. In the URL field, input the anchor target (e.g., #pricing).
  4. Label it appropriately and click Add to Menu.

This is especially useful in single-page sites or landing pages where different sections are stacked vertically and navigation needs to be instantaneous.

Common Pitfalls to Avoid

While anchors and smooth scroll effects can significantly enhance user navigation, there are a few pitfalls to watch out for:

  • Broken links: Always double-check that the anchor IDs match the link paths.
  • Accessibility concerns: Screen readers may have trouble identifying anchor-target contexts. Implementing aria-label attributes can help.
  • Overuse: Too many anchor links can clutter the page and confuse users. Use them sparingly and logically.

Conclusion

Mastering anchor links and smooth scroll in WordPress is an essential skill for any developer, designer, or content creator aiming to improve site navigability and user engagement. Whether you’re building a polished landing page, a detailed FAQ section, or a structured single-page site, these techniques provide both functional and aesthetic enhancements. Through proper implementation—via editors, shortcodes, plugins, or code—you can ensure your visitors enjoy a premium, interactive browsing experience.

With continued attention to detail and performance, your website can instantly feel more modern, purposeful, and user-friendly.

To top