Make a professional website without coding - Jimdo - Official website

Overview

One-Page navigation turns your first-level menu items into smooth-scroll anchors on the home page. Your menu keeps its normal Jimdo page URLs (/, /designs/, /contact/). On the published home page, Matrix automatically converts them to in-page #section-id links whenever a matching section anchor exists.

First-level menu items scroll to their sections instead of loading new pages
The active section is highlighted in the menu as you scroll (scroll-spy)
Sub-pages keep working as normal pages and show as dropdown items
Works on desktop and mobile, with the mobile overlay closing on tap

What's new: Anchor sections are now added with the built-in One-Page Section module from the panel — no more manual HTML or nav-editor hashes.

How it works

The feature adapts automatically to where your visitor is and whether you're editing or publishing.

Context	Behavior
Published home page	First-level nav URLs become `#section-id` hashes; clicks smooth-scroll to the section.
Sub-pages	Normal page navigation. Hash links redirect back to the home page + section when needed.
Admin preview	Scrolling is disabled so the menu stays clickable for switching pages while editing.
Mobile	The navigation overlay closes automatically after a menu item is tapped.

1 Quick setup

Getting one-page navigation running takes three steps.

Step 1 — Enable the feature

Set onePage: true in your configuration and make sure the script is uploaded to your project.

matrix-config.js

window.MatrixConfig = {
  features: {
    onePage: true // Enable one-page scroll navigation
  }
};

Note: Make sure one-page-scroll.matrix.js is uploaded to your project. This script powers the smooth-scroll navigation.

Step 2 — Add your section anchors

On the home page, open the module map and add a One-Page Section for each first-level menu item (see the section below).

Step 3 — Save & publish

Publish your site. Your first-level menu items now smooth-scroll to their sections on the home page.

Tip: Smooth scrolling only applies on the published home page — not inside the admin preview.

2 The One-Page Section module

Since v1.7.6, anchor sections are added visually from the module map — no HTML editing needed. The picker lists your first-level menu items and inserts the correct anchor markup for you.

No coding required

Pick a menu item from the list and Matrix inserts a matching .cc-section anchor automatically.

Add a section in the editor

1

Open the home page

Edit your home page in the Jimdo admin (the cc-indexpage).

2

Click the + module map

Open the main module panel and choose One-Page Section.

3

Pick a menu item

Select a first-level nav item (e.g. Designs). Matrix inserts the anchor for you.

4

Save & repeat

Add a section for each menu item you want to scroll to, then publish.

What the picker does

Lists first-level menu items only (sub-pages are excluded by design)
Shows a spinner while it loads your navigation, then fills the list in place
Highlights sections that already exist in blue — clicking scrolls to them instead of creating a duplicate
Generates unique slugs for duplicate menu titles (e.g. new-page, new-page-1)

Info: The One-Page Section module is available only when onePage: true, you're editing the home page, and the main module map is open. On earlier versions, add sections manually (below).

browser-frame

3 Manual sections (optional)

Prefer to do it by hand, or running an older version? Add a Widget/HTML module and drop in a .cc-section anchor. The id must match the slug produced from the menu link.

HTML

<div class="cc-section" id="home">
  <span>Home</span>
</div>

<div class="cc-section" id="designs">
  <span>Designs</span>
</div>

<div class="cc-section" id="contact">
  <span>Contact</span>
</div>

Caution: The id must match the slug generated from the nav link (e.g. /designs/ → designs), or the menu item won't find its section.

URL → section id

Section ids come from your page URL slugs, not the display titles. Special characters are stripped.

Menu link	Section id
`/` or Home	`home`
`/designs/`	`designs`
`/über-uns/`	`ber-uns`
`/new-page-2/`	`new-page-2`

Note: Jimdo reserves /about; editor-created "About" pages use about-1 instead.

Configuration

Advanced defaults you can tune in onePageScroll.js.

Option	Type	Default	Description
`scrollDuration`	number	`800`	Scroll animation length in milliseconds.
`scrollOffset`	number	`80`	Offset from the top for fixed headers.
`smoothScroll`	boolean	`true`	Animate scrolling instead of jumping.
`hashUpdate`	boolean	`true`	Update the URL hash while scrolling.
`debugMode`	boolean	`false`	Verbose console logging for debugging.

Troubleshooting

Issue	Fix
Nav doesn't scroll on the home page	Add a `.cc-section` whose id matches the nav slug, confirm `onePage: true`, and make sure you're on the home page.
No One-Page Section button	Enable `onePage`, edit the home page, and open the main `+` module map.
Duplicate id warning	That anchor already exists — the row is highlighted blue. Click it to scroll, or remove the old module first.
Wrong section id	Ids come from URL slugs, not display titles. Check `/designs/` → `designs`.
Sub-page missing from picker	By design — only first-level menu items are listed.

One-Page Navigation