Link Objects visible in Volto Menu with anchor as target do not scroll to position of the anchor

[acsr]

UPDATED Now tested in plain Volto / Pastanaga! Same in plain volto in the standard main navigation
needs to be recreated in volto repo.

Issue: In the main Navigation:

• Link Object with links to anchors are shown in the menu with their title
• They show their target url in the browser status bar
• Clicks are not resulting in scroll to anchor on same page or others.
• If you are logged in, the Link Object opens. From there clicking the link results in scrolling to the anchor at the target url.

Same in mobile navigation!

We stumbled over this during work o the Plone Tagung 2025 website at https://tagung.plone.de and was elaborated and verified now deeper with latest VLT.

verified with https://demo.plone.org
Volto 18.27.3
Plone 6.1.3
@kitconcept/volto-light-theme 7.2.0 (Fat Menu activated)

Locally tested with 7.3.1 (with and without Fat Menu activated)

Steps to reproduce

Plone 6.1.x with Volto 18 and VLT from 6.0.1alpha21 to 7.3.1

• Add an anchor on the middle of the root page (see below, use the HTML-Block or Text-Block with an H2 or h3.
• Create a Link Object in the site root (or LRF) in Volto using VLT
• in the target link field enter a full path to an anchor on the LRF page. eg. /#about or /de#about on an intl site
• Make sure you have not activates the Hide from Navigation option

Result

• The link shows up in the navigation

We test the link in public view (not logged in)

• On hover on desktop the proper absolute url is shown
• On click on the same page -> The browser stays on the page, displays the anchor url but stays where you are
• On click on other page -> The browser jumps to the page, displays the anchor url but stays at the top or stays where you are vertically.
• If you enter the displayed url in the browser manually and hit return, the browser jumps to that anchor on the same page or others.

Troubleshooting

• Add the Link Object as target to the new Header Actions of VLT 6.2.0+ -> link to the anchor works and jumps to the anchor.
• Add the rendered link code manually to the rendered html using devtools -> link works and jumps to the anchor.
• Use an id of a slot of a volto-accordion-block as target in the link object, the browser reloads the page even when on the page (not nice) and opens the target.
• No obvious events in the console pointing to javascript failures

How to create Anchors in Volto

• Slug based anchors for headings are only created by slate for the text-blocks containing H2 and H3, not for the others or the Heading block.
• other default blocks for VLT except the volto-accordion-block generate no unique IDs.
• eeacms/volto-anchors tested – does not change this at all.
• You can use a plain HTML block with this code: <a id="about" style="scroll-margin-top: 4rem;"></a> (scroll-margin-top can adjust the offset of the target if you use sticky stuff at the top.)

[acsr]

Now tested in plain Volto without VLT. Need to recreate the issue there.

[acsr]

Finally I think this is an issue with the sticky header I used in the design. After removing the sticky header from the custom CSS the site became usable again. The actual issue is not because of the sticky header code in HTML but releted to the way react routing decides when it it is finished to scroll back to top. Because the Sticky Header is in place the code "thinks" it is enough to scroll up an amount related to the distance from the clicking mouse pointer to the top position of the sticky header ignoring the longer way to the top.

This effect is also described by other designs based on other react based systems[*] using sticky headers and try to force scrolling up via javascript additions.

The next challenge then is to deal with anchors properly.

This was the code I used in frontend/packages/my-project/customizations/@kitconcept/theme/_main.scss

// sticky header + navigation
#main {
  overflow: auto;
}

body header.header-wrapper {
  position: sticky;
  z-index: 99;
  top: 0;
  height: 100vh;
}

.ui.basic.segment.content-area {
  overflow: hidden;
  height: auto;
}

---

[*] Related:

• Parallel routes rendered in a global sticky header prevent scroll to top behavior · Issue #79571 · vercel/next.js

  url:: Parallel routes rendered in a global sticky header prevent scroll to top behavior vercel/next.js#79571

  • abstractNote

    Link to the code that reproduces this issue https://github.com/ryanburns23/next-parallel-routes-scroll-issue To Reproduce Start the application with next dev Click a link with the page scrolled dow...