BugWP logo BugWP
Back to Community
Home / Community / Plugin → Page builder by siteorigin

Fixing Page Jump Issues with Anchor Links in Page Builder by SiteOrigin

29 threads Sep 16, 2025 Plugin → Page builder by siteorigin

Content

Are your anchor links jumping to the wrong spot on the page? You click a menu link expecting to land neatly at a section heading, but instead, you're dropped halfway through the content. This is a common frustration for users of Page Builder by SiteOrigin, but the good news is that it's usually not the page builder's fault and is often easily fixable.

Why Does This Happen?

This jumping behavior, known as a scroll offset issue, is almost always caused by your website's theme. Many modern themes use a "sticky" header that remains fixed at the top of the screen as users scroll. While this is great for navigation, it means that when a browser jumps to an anchor link (like #my-section), the target heading appears directly at the top of the viewport, hidden underneath the sticky menu.

The browser is technically doing its job correctly; it's scrolling the anchor into view. The theme simply needs to be told to account for the space its sticky header occupies.

How to Fix Anchor Link Scroll Offset

Solution 1: Use a Dedicated Plugin (Recommended for Non-Developers)

The simplest way to resolve this is with a lightweight WordPress plugin that handles the offset automatically. The Hash Link Scroll Offset plugin is a popular and effective solution mentioned in Page Builder by SiteOrigin support threads. After installing and activating this plugin, it will automatically detect your sticky header's height and adjust the scroll position of all anchor links accordingly.

Solution 2: Add Custom CSS

If you prefer not to add another plugin, you can achieve the same result with custom CSS. You will need to know the height of your sticky header (e.g., 80px). Add the following code to Appearance > Customize > Additional CSS in your WordPress dashboard, replacing `80px` with your header's actual height.

html { scroll-padding-top: 80px; } /* Modern method */
:target { scroll-margin-top: 80px; } /* Modern method backup */

For broader browser support, you might need a more comprehensive CSS solution or a small amount of JavaScript, which is why the plugin is often the easier choice.

Solution 3: Check Your Anchor Setup

Before blaming the theme, double-check that your anchors are set up correctly. In your Page Builder row or widget, ensure you are using the correct HTML syntax.

  1. Create the Anchor: In your target heading, add a unique ID attribute. For example: <h2 id="our-staff">Our Staff</h2>
  2. Link to the Anchor: Create your link using the full page URL followed by the hash and the ID: https://yourwebsite.com/your-page/#our-staff

Using the full URL path is the most reliable method, especially for links from one page to an anchor on another.

When Page Builder Might Be the Cause

In rare cases, certain widgets may filter out HTML attributes like `id` when saving content. If you find your custom `id` attributes are being stripped, try using a Custom HTML widget to insert your anchor. This widget is designed to preserve all raw HTML code.

By understanding that this is typically a theme styling issue and not a bug in Page Builder by SiteOrigin, you can quickly apply one of these solutions and get your page navigation working perfectly.

Related Support Threads Support