Make "scroll to anchor navigation" work in long Volto pages from the navigation (Fat-)menu (or sticky menu)

When you create long landingpages using Volto and in particular VLT your Header scrolls away if do not make efforts to change it to sticky behaviour.

We like to use anchors to use them in a sticky menu.
A basic design is working and we can manage to add anchors at least manually.

We still miss a default functionality to hand the creation of anchors to the editors and make the navigational experience better. Also the Sticky Menu has a slot, but nbo example how to inject a TOC or anchors.

Linking to anchors in the default navigation not working (Plain Volto, VLT, Fat Menu)

You can use Plone Volto Link Objects to target a URL containing anchors and make them show up in the default navigation.

  • While those links open the page at the anchor on the target page, using them in the navigation just opens the page but does not scroll to the anchor.
  • If the Navigation link is clicked on the page the anchor resides, nothing scrolls.

The issue is quite more complex.

  • Using the Link objects in Volto Light Theme >7.x header actions or footer actions is working well.

Side Effects in our case:

Fixing the scroll offset for anchors with the sticky navigation is not that difficult if it works in general.

related: