Is it possible to have full-height sections and a fixed arrows navigation in the lower right corner in Webflow without custom code, potentially using Interactions? How can I create something like this?
TL;DR
- Set each section's height to 100vh and assign unique IDs for scroll targets.
- Add a fixed bottom-right navigation with arrow buttons linked to scroll interactions using Webflow's Interactions panel—no custom code needed.
Yes, it's possible to create full-height sections with a fixed arrow-based navigation in the lower right corner using Webflow interactions—no custom code required.
1. Create Full-Height Sections
- Set each section’s height to 100vh (100% of the viewport height).
- Add a new Div Block inside the Body for each section and give each a class like
section. - In the style panel, set the following:
- Height: 100vh
- Width: 100%
- Display: Block or Flex (if inner content requires)
- Position: Relative (optional, if layering or nesting elements)
2. Add Fixed Arrow Navigation
- Create a new Div Block and set it to act as the navigation container.
- Style the container:
- Position: Fixed
- Location: Bottom right (e.g., bottom: 40px, right: 40px)
- Z-index: High enough (e.g., 999)
- Add arrow buttons inside this container, one for “Scroll Down” and another for “Scroll Up” (or just “Down” if one-directional).
- Use Icon elements or images with arrow symbols.
3. Set Unique Section IDs
- Give each section a unique ID (e.g.,
section-1,section-2...) using the Element Settings panel. - This enables scrolling targets for interactions.
4. Create Page Scrolling Interactions
- Go to Interactions panel (lightning bolt icon).
- Create a new Page Trigger > Mouse Click (Tap).
- Link each arrow button to a Scroll action:
- Choose Scroll to Element
- Set the target based on the next or previous section's ID (e.g., scroll to
section-2when the user clicks the down arrow) - For smooth transitions, check the "Easing" setting (e.g., Ease In Out) and set the duration (e.g., 800ms).
5. Optional: Manage Arrow Visibility
- Use interactions to hide or disable arrows when at the top or bottom of the page.
- You can do this by tracking which section is in view with Page Scroll or Element Scroll triggers, then setting the arrow visibility accordingly.
Summary
You can build full-page height sections and fixed bottom-right arrow navigation in Webflow using native 100vh sizing and Interactions. No custom code is required—just set up fixed nav buttons, anchor target IDs, and scrolling animations via the Interactions panel.