[marcofama]

hey guys

I’m writing this ticket related to a problem I’ve already pointed out
https://www.pixelwars.org/forums/topic/why-is-the-anchor-scrolling-way-too-down/

but I’m struggling to find a solution and I need your help, because other themes work well and the client just told me that “it’s not acceptable and you must ask the developer and you two should find a solution”.

Basically, if I try to link a top menu item to a #certainSection the browser will point me to somewhere close but not exactly there, due to the top bar presence.

So, what I did was trying to link the #certainSection menu not to the real section but I’ve created a FAKE section BEFORE the real section I mean to link, and named it as ID=certainSection

While this works kind of ok sometimes, in other points this is not achievable properly, and especially on mobile this returns a very bad behavior and look

So, I’m here to please ask for help: how can I set a workaround / offset so that it can compensate the top bar’s height and scroll down to “#certainSection + top bar height in pixels”?

Any other idea to fix this one?

thanks

[marcofama]

You can close this one, chatGPT helped me proposing a great solution (I’m pasting it here, just in case somebody needs it).

There is a CSS function that can help you scrolldown to section + offset in pixels

#sectionYouNeedToLink {
scroll-margin-top: 91px;
}

@media (max-width: 768px) {
#about {
scroll-margin-top: 50px;
}
}

[serkan]

Hi,
Thanks for the feedback.

[marcofama]

Hi Serkan

I’m reaching out to report a persistent issue we’re experiencing with anchor scrolling on our website, specifically and ONLY for the #chi-siamo section and ONLY on mobile.

Despite trying several reliable methods, it’s the only section where the scroll behavior fails on mobile — and only on the first click. On second click, it behaves correctly.

Here’s a detailed summary of everything we’ve tested and implemented, all without success:

✅ Current setup
• The section has a proper ID in the DOM: id=”chi-siamo”…
• Anchor menu items are standard < a href=”#chi-siamo” > links
• No lazy loading is currently active on the page

🔁 Solutions we tried
1. Native CSS scroll offset using scroll-margin-top:

#chi-siamo {
scroll-margin-top: 91px;
}

@media (max-width: 768px) {
#chi-siamo {
scroll-margin-top: 50px;
}
}

This works perfectly for other sections like #contatti and #scegliere-ellisse, but not for #chi-siamo on mobile, where the scroll lands too far up on first click.

2. Global scroll padding with :root override:

:root {
scroll-padding-top: 91px;
}

No effect on the problematic anchor.

3. JavaScript scroll override (vanilla JS):

document.querySelectorAll(‘a[href=”#chi-siamo”]’).forEach(anchor => {
anchor.addEventListener(‘click’, function(e) {
e.preventDefault();
const el = document.getElementById(‘chi-siamo’);
if (!el) return;

const offset = 91;
const y = el.getBoundingClientRect().top + window.scrollY – offset;

window.scrollTo({ top: y, behavior: ‘smooth’ });

// Force re-scroll in case of layout shift
setTimeout(() => {
window.scrollTo({ top: y, behavior: ‘smooth’ });
}, 500);
});
});

We also placed this code both in the page footer and via a JS plugin to ensure execution order. Still no success.

4. Tested with other IDs and sections, and everything works as expected — even on mobile. The issue only affects the #chi-siamo anchor on mobile and only when clicking it before any scrolling has taken place.

❓ Questions / Request

Could you please help us identify why the #chi-siamo anchor behaves differently compared to other anchors?

We’re wondering if there’s:
• A hidden margin or padding above the section causing a false offset?
• A render or repaint delay for that specific container?
• A theme-level script or behavior that is applied only to that section?

Any guidance or fix you can provide would be greatly appreciated — the client has explicitly requested this behavior to be fixed, and we’ve exhausted all other options on our end.

Looking forward to your help!

Best regards,
Marco

[serkan]

Hi Marco,

Thank you for the detailed explanation and for all the troubleshooting steps you’ve already taken. I understand how frustrating this issue must be, especially since it’s isolated to just the #chi-siamo section on mobile.

From your description, it seems the problem might be related to one of the following:

Layout Shift or Dynamic Content: The section might have content (e.g., images, iframes, or dynamic elements) that load after the initial scroll, causing an unexpected offset.

CSS Conflicts: There could be specific CSS rules (e.g., overflow, transform, or position) applied to #chi-siamo or its parent containers that interfere with scrolling.

JavaScript Interference: A theme or plugin script might be modifying the scroll behavior for this section.

Next Steps:
Inspect the Section: Could you check if #chi-siamo or its parents have any unique CSS properties (e.g., transform: translateZ(0), overflow: hidden)? These can sometimes break smooth scrolling.

Test with Minimal Setup: Temporarily disable plugins or custom scripts to rule out conflicts.

Forced Scroll Fix: Since the issue only happens on the first click, we could try a more aggressive JS workaround:

javascript

document.querySelectorAll('a[href="#chi-siamo"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const el = document.getElementById('chi-siamo');
    if (!el) return;
    
    const offset = 50; // Mobile offset
    const y = el.getBoundingClientRect().top + window.scrollY - offset;
    
    // Double scroll to bypass initial misalignment
    window.scrollTo({ top: y, behavior: 'smooth' });
    setTimeout(() => window.scrollTo({ top: y, behavior: 'smooth' }), 100);
  });
});

If you’d like, I can also schedule a quick screen-sharing session to debug this together. Let me know your availability or if you’d prefer further code-level assistance.

Thanks for your patience!
Best regards.

[marcofama]

Hi Serkan,

Thanks again for your detailed reply and the helpful suggestions — I really appreciate your support.

Unfortunately, both your proposed solution and an adjusted version like this:

document.addEventListener(“DOMContentLoaded”, function () {
const isMobile = window.innerWidth <= 768; if (!isMobile) return; // Solo su mobile const anchor = document.querySelector(‘a[href=”#chi-siamo”]’); const target = document.getElementById(‘chi-siamo’); if (!anchor || !target) return; anchor.addEventListener(“click”, function (e) { e.preventDefault(); const offset = 50; const y = target.getBoundingClientRect().top + window.scrollY – offset; // Primo scroll window.scrollTo({ top: y, behavior: “smooth” }); // Secondo scroll (dopo layout stabilito) setTimeout(() => {
const newY = target.getBoundingClientRect().top + window.scrollY – offset;
window.scrollTo({ top: newY, behavior: “smooth” });
}, 400);
});
});

didn’t resolve the issue.

We’re still experiencing the same behavior: the #chi-siamo anchor scrolls to the wrong position on the first click from the top of the page on mobile, and only works correctly on the second click.

That said, I truly value your willingness to assist, and I’d be honored to do a screen sharing session with you to debug this together.

Could you please let me know your timezone and what time slots you have available? I’m based in CEST (Italy).

Looking forward to your reply and thanks again for your support!
Best regards,
Marco

[serkan]

Hi Marco,
I will forward this topic to our developer and i will keep you updated.
Thanks

[ahmetsali]

Hi, that’s an unusual issue. I logged into your site and tried to understand what causes that issue, but had no success. The issue is going away when you move the section “#chi-siamo” to the upper part of the page, which is also interesting and makes me think if any section before that section is causing a layout shift and so causing the issue.

Cheers.

[marcofama]

hey Ahmet, thanks for taking a look at it.

So my question is: how do you suggest we proceed on this? :/ if you can’t figure it out too, I’m a bit lost :)

thanks a lot

[ahmetsali]

Hi again, you can save your homepage as a template as backup and remove the sections before the section “#chi-siamo” and then add the sections one by one and test to see which section is causing that issue. And when you find that problematic section, you can try to re-create it from scratch.

Cheers.

[marcofama]

Honestly speaking Ahmet? I’m getting mad on this

even on the backup page the behaviour appears and there is no way to understand what that is because even following your advice, the moment you introduce the section again it goes f**** again

Not only – I also tried creating a “test” anchor a few paragraphs higher: the scroll scrolls even HIGHER again

:/

What should I do? :/ I’ve never seen anything like this before

[serkan]

Hi Marco,

Thank you for your patience and thorough troubleshooting efforts so far. We understand how frustrating this isolated mobile issue must be, especially given that standard solutions work perfectly for other sections.

What We Know:
The issue only occurs with #chi-siamo on mobile and only on the first click.

All tested fixes (scroll-margin-top, JS overrides, etc.) fail to resolve it, suggesting a deeper layout or rendering conflict.

Immediate Next Steps:
Deep Dive Analysis

Unique CSS properties applied to #chi-siamo or its parent containers (e.g., transform, overflow, position).
Potential JavaScript interference from theme/plugins during initial page load.

Collaborative Testing (If You’re Open to It)
To isolate the cause, could you:
Create a stripped-down test page with only #chi-siamo and its immediate content?
Temporarily disable all non-essential plugins and retest?

Temporary Workarounds to Try:
Aggressive JS override (forces double-scroll to account for layout shifts):

javascript

document.querySelectorAll('a[href="#chi-siamo"]').forEach(anchor => {
  anchor.addEventListener('click', (e) => {
    e.preventDefault();
    const y = document.getElementById('chi-siamo').offsetTop - 50;
    window.scrollTo({ top: y, behavior: 'smooth' });
    setTimeout(() => window.scrollTo({ top: y, behavior: 'auto' }), 300);
  });
});

Timeline & Commitment:
Does the issue occur in incognito mode or with browser cache disabled?

We truly appreciate your partnership in resolving this. While the behavior is unusual, we’re confident we’ll find a solution together.

Best regards,
Serkan

[marcofama]

Hi Serkan,

Thank you for continuing to support this issue — but I really need to express how deeply frustrating this has become.

I have followed all the troubleshooting steps you suggested:
– I have created a stripped-down debug page, containing only two sections: a large block of text and a simple #chi-siamo section, made up of plain text. No animations, no dynamic content, no JavaScript, nothing.

– I have deactivated all non-essential plugins, as you can clearly see in the attached screenshot — only Elementor and system-critical plugins remain.

– I have thoroughly cleared the entire cache, both on the browser and server side.

Yet, the issue still persists: on mobile, clicking the anchor link to #chi-siamo still scrolls to the wrong position, only on first click, regardless of the layout simplicity or animation status. And also even REGARDLESS of the page content: again, check the debug page, it’s ONLY TEXT now.

I also applied every workaround we’ve discussed so far:
– scroll-margin-top and scroll-padding-top via CSS — no change
– custom JavaScript to override scroll behavior with offsets and even delayed double-scroll — ineffective
– using IntersectionObserver to wait until the element was rendered before performing a forced scroll — no change
– replacing the anchor links with custom attributes and triggering the scroll entirely through JavaScript — also failed

I can now confidently say that this is not an animation issue, nor a plugin conflict, nor a layout-shift caused by dynamic content. It’s a deeply rooted problem tied to the theme or template behavior on mobile anchor scrolling.

At this point, I’m investing an unreasonable number of hours trying to make this work. My client is understandably pressing to launch, and frankly, I can’t tell him that a basic scroll-to-anchor doesn’t work because of a template bug.

So please — I kindly ask that you do everything in your power to help resolve this issue.

Here is the debug page I mentioned, with no animation or layout complexity, where the problem can be reproduced in its pure form (check below in the private area)

Let me know what additional logs or steps I can provide — but I’d really appreciate if your team could take this issue seriously and try to reproduce and fix it directly in the theme code or whatever it is guys.

Thank you again for your time and support,
Marco

PS: feel free to deactivate any plugins on the site, do whatever it takes (just don’t delete the content or any our plugins eheh) to debug and fix this

[serkan]

Hi Marco,

Thank you for your detailed follow-up and for all the effort you’ve put into troubleshooting this issue. I completely understand your frustration—this is not the experience we want for you or your client, and I sincerely apologize for the time this has taken.

What We’ll Do Next:

Priority Escalation: I’ve escalated this to our senior development team with all your findings (debug page, plugin screenshots, and test results). They’ll conduct a deep dive into the theme’s core behavior, focusing on mobile anchor scrolling.

Direct Debugging: We’ll test your stripped-down debug page on multiple devices to isolate the root cause—whether it’s a theme-level JS conflict, CSS stacking context issue, or rendering quirk.

Again, I truly appreciate your patience and collaboration. We’re committed to resolving this urgently and will keep you informed every step of the way.

Best regards.

[marcofama]

hey guys, any news on this instead? :(

I heard Elementor Pro might have a “Sticky Header Offset” which could possibly work? do you have a chance to try that? cause I don’t have a Pro license, obviously…

Thanks for giving us updates on this matter

[serkan]

Hi,
I have forwarded this issue to Mr. Ahmet, the developer, and he will get back to you with the solution.
Thanks

[ahmetsali]

Hi again, sorry we can’t understand the cause of this issue. The only thing I can suggest is the one in my previous reply.

https://www.pixelwars.org/forums/topic/i-need-anchors-to-work-properly/#post-93588

Btw, we haven’t tested “Sticky Header Offset”.

Have a nice day!