How can I center a section in the middle of the screen when a user clicks on a in page link in Webflow?
TL;DR
- Assign a unique ID to the target section and set the link’s URL to that ID.
- Replace default anchor scrolling with a Click Trigger interaction that scrolls to the section using a 50vh offset to center it in the viewport.
To center a section in the middle of the screen when a user clicks an in-page link in Webflow, you'll need to offset the native anchor scroll behavior using a scroll interaction.
1. Assign Unique IDs to Your Target Sections
- Select the section you want to scroll to.
- In the Element Settings panel (gear icon), give the section a unique ID (e.g.,
#about-section). - This ID will be used in your link (e.g., set the link’s URL to
#about-section).
2. Disable the Default Anchor Scrolling
- There's no native toggle in Webflow to disable the default anchor scroll, but you can override it with an interaction.
- Instead of letting the link scroll directly, you'll intercept the click and trigger a scroll animation.
3. Create a Page Scroll Animation
- Go to the Interactions panel.
- Click Page Trigger > While Page is Scrolling → Skip this—we want a "Click" trigger instead.
- Create a new Element Trigger on the link, and choose Mouse Click (Tap).
- Set it to start a new animation.
- Add a Scroll action: Choose Scroll to and select the target section (
#about-section). - Use the "Offset" field to adjust where the section appears — set it to 50vh to place the section vertically centered.
4. Calculate the Correct Scroll Offset
Webflow doesn’t let you scroll exactly to center with just the section and offset, unless you manually measure the spacing. But you can estimate using:
- 50vh offset = center of viewport.
- Or use custom animation that scrolls to a specific Y position, based on the element’s size and location.
5. Ensure Smooth Scrolling
- In your Page Settings, confirm that Webflow’s smooth scrolling is enabled (on by default).
- This keeps the animation fluid.
Summary
Use a Click interaction on your navigation or in-page link to trigger a scroll animation that includes an offset (like 50vh) so the target section appears centered in the viewport, overriding the default anchor linking behavior.