--- title: "How to Create One Page Scroll Navigation in WordPress?" url: https://nexterwp.com/docs/create-one-page-scroll-navigation-in-wordpress/ date: 2024-12-12 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "A one-page site asks the visitor to scroll a long way, and a long scroll without landmarks is where people give up. Scroll Navigation puts a small fixed set of..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-One-Page-Scroll-Navigation-in-WordPress_-1024x519.jpg word_count: 465 --- # How to Create One Page Scroll Navigation in WordPress? ## Key Takeaways - Nexter Blocks Pro is required for Scroll Navigation, and the block renders nothing when Nexter Blocks Pro is deactivated. - Scroll Navigation uses one dot per section, with each dot linking to a section anchor such as about or pricing that is set in the block's Advanced settings. - The block writes nav-left or nav-right into its classes to match the chosen side, and it works without JavaScript because the dots are plain anchor links. A one-page site asks the visitor to scroll a long way, and a long scroll without landmarks is where people give up. Scroll Navigation puts a small fixed set of dots down the side, one per section, so the whole page is one click away wherever the reader is. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-one-page-scroll-navigation/) ## Before You Start - **Edition:** **Pro** — the Scroll Navigation block needs Nexter Blocks Pro.- **Block to enable:** Scroll Navigation, switched on under **Nexter > Blocks** in your WordPress dashboard.- Your page sections, each with its own anchor set in the block's Advanced settings. ## Video Tutorial https://www.youtube.com/watch?v=WV5aUwUJtrs ## Steps - Give each section on the page an **anchor** — a short id such as `about` or `pricing`. ![Setting an anchor on a section](https://nexterwp.com/wp-content/uploads/2024/12/scroll-navigation-activate-new.webp) - Add the **Scroll Navigation** block once, anywhere on the page. ![Scroll Navigation block, Content panel in the Layout tab](https://nexterwp.com/wp-content/uploads/2026/09/rs-scroll-navigation-layout-content.webp) - Add one entry per section and point each at its anchor. ![Adding the navigation items](https://nexterwp.com/wp-content/uploads/2024/12/scroll-navigation-design-type.webp) - Choose the **side** the dots sit on, and a style. ![Scroll Navigation block, Connections panel in the Layout tab](https://nexterwp.com/wp-content/uploads/2026/09/rs-scroll-navigation-layout-connections.webp) - Publish and scroll the real page. ![Scroll Navigation block, Navigation panel in the Style tab](https://nexterwp.com/wp-content/uploads/2026/09/rs-scroll-navigation-style-navigation.webp) ## How It Behaves The block renders one dot per entry in its list, each a link to the anchor you gave it. - **One dot per entry, each an anchor link.** Measured on a published page: the default single entry rendered one `.tpgb-scroll-nav-item` linking to `#Id1`, with its position recorded as `data-tab="0"`.- **The side is written into the block's classes** — measured, the block carries `nav-left` or `nav-right` to match your choice.- **The dots are links, so they work without JavaScript too** — a browser will jump to the anchor regardless.- **Anchors are the whole mechanism.** A dot pointing at an anchor that does not exist simply goes nowhere.- Measured with Nexter Blocks Pro deactivated: the block renders nothing at all. ## Limitations - **Pro only** — measured, the block renders nothing without it.- **Every section needs an anchor you set yourself.** The block does not discover sections; it links to ids you have created.- **Add the block once per page.** Two of them means two sets of dots.- **Dots carry no labels by default**, so a visitor cannot tell what a dot leads to until they use it — switch tooltips on if the destinations are not obvious. ## Troubleshooting ### A dot does not go anywhere Its anchor does not match a section on the page. Check the section's Advanced settings and the navigation entry use the same id, without a `#` in the anchor field. ### The dots are on the wrong side Set the direction on the block — measured, that writes `nav-left` or `nav-right` onto it. ### There is only one dot The block ships with a single entry. Add one entry per section — measured, the default renders exactly one dot. ### Nothing renders at all Measured with Nexter Blocks Pro deactivated: the block renders nothing at all. Check Nexter Blocks Pro is active. ## Related Docs - [Add an interactive circle in WordPress](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/)- [Add a Carousel Remote in WordPress](https://nexterwp.com/docs/add-carousel-remote-in-wordpress/)- [Add dark mode in WordPress](https://nexterwp.com/docs/add-dark-mode-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before creating one page scroll navigation in WordPress?** A: Nexter Blocks Pro is the key requirement, because the Scroll Navigation block is Pro only and renders nothing without it. Each section also needs its own anchor, set in the block's Advanced settings, so the dots have a real target to jump to. That setup matters because the block does not discover sections automatically, it only links to ids you create. **Q: How do I set up one page scroll navigation on a WordPress page?** A: The structure is simple: give each section a short anchor like about or pricing, add the Scroll Navigation block once on the page, then add one entry for each section and point each entry at its anchor. Nexter Blocks provides the block, and the dots become fixed links to those anchors. The practical tip is to keep the ids short and consistent so you do not lose track of which dot maps to which section. **Q: Why does a scroll navigation dot not go anywhere?** A: That usually means the anchor and the section id do not match. The dot only works when its entry points to an anchor that exists on the page, and the anchor field should use the id without a #. In practice, this is the most common failure point because one small mismatch breaks the jump even though the dot still appears. **Q: Why are my scroll navigation dots showing on the wrong side?** A: The side is controlled by the block direction setting, which writes nav-left or nav-right into the block classes. If the dots land on the opposite side from what you expected, it is a direction setting issue rather than a layout bug. That matters because the position is part of how users visually scan a one-page site while scrolling. **Q: Why is there only one dot in my scroll navigation?** A: The block ships with a single entry by default, so one dot means no extra entries were added yet. Nexter Blocks renders one dot per entry in its list, with each dot linking to its own anchor. The fix is structural: add one entry per section so visitors can jump across the whole page instead of just one spot. **Q: Can I use scroll navigation if Nexter Blocks Pro is turned off?** A: No rendering happens without Nexter Blocks Pro active, so this block depends on that edition being enabled. Measured with Pro deactivated, the block outputs nothing at all, which makes this more than a styling issue. If you are testing and see an empty area, activation status is the first thing to check before chasing anchors or layout settings.