How Do I Add Smooth-Scroll Anchor Links to a Webflow One-Page Site in 2026?

Why do jump links make a one-page Webflow site feel finished?

Jump links make a one-page site feel finished because they turn a long scroll into a menu. A visitor clicks "Pricing" in the nav and glides straight to the pricing section. That small motion signals care. It tells people the page was built for them, not just stacked together and shipped.

A jump link, also called an anchor link, is a link that scrolls to a specific spot on the same page instead of loading a new page. On a one-page Webflow site, this is how the navbar works. Each nav item points to a section, and clicking it moves the viewer there. Add smooth scrolling and the movement glides instead of snapping.

The whole setup takes three pieces. You give each section an ID, you point a link at that ID, and you turn on smooth scrolling. Webflow handles most of this without custom code. I will walk through each piece so you can build it once and reuse it on every one-page site you make.

What is an anchor link and how does it work?

An anchor link is a URL that ends in a hash and an ID, like #pricing. The hash tells the browser to stay on the current page and scroll to the element with that ID. So the link and the target are two halves of one system. The ID names the spot, and the link points to the name.

This is native browser behavior, not a Webflow trick. Every browser, including Chrome and Safari, understands hash links. Webflow simply gives you a visual way to set the ID and the link without writing HTML. Once you understand the two halves, the whole thing stops feeling like magic and starts feeling like plumbing.

Anchor links are the backbone of good one-page navigation. They pair naturally with a sticky navbar, which keeps the menu in reach as people scroll. If you are still deciding on your overall nav approach, my guide to Webflow navigation patterns covers when a sticky one-page menu is the right call.

How do I give a Webflow section an ID?

Select the section, open the settings panel, and type an ID in the ID field. Keep it short, lowercase, and hyphenated, like pricing or contact-us. That ID is the name the browser will scroll to. Every section you want to reach from the nav needs its own unique ID.

In the Webflow Designer, the settings panel is the gear icon in the right sidebar. Near the top you will see a field labeled ID, separate from the class name you use for styling. This is important. The class controls how a section looks, and the ID controls where a link can jump to. They do different jobs and should not be confused.

Give IDs only to the sections you actually link to, and make each one describe the content. An ID like section-3 tells you nothing six months later. An ID like testimonials tells you everything. Clear names make the next step, wiring up the links, quick and hard to get wrong.

How do I point a link at that section?

Select the link, open its settings, and choose the Page Section link type, then pick your section from the list. Webflow reads the IDs you set and shows them as choices. This is the no-code path, and it is the one I use, because it avoids typos in the hash.

If you prefer to type it yourself, you can set the link URL to a hash followed by the ID, like #testimonials. This is the standard href anchor that every browser understands, and documentation sites like MDN describe the same behavior. The visual picker is safer because it only offers IDs that really exist, so you cannot accidentally point a link at a section that is not there.

Do this for every nav item on your one-page site. Each item points to one section. When you preview the page and click a nav item, the browser should jump to the matching section. At this stage the jump is instant and abrupt. The next step is what makes it glide.

How do I turn on smooth scrolling in Webflow?

Add one line of CSS in an embed or the page settings. The rule is scroll-behavior smooth on the html element. That single line tells the browser to animate the scroll instead of snapping. It works for every anchor link on the page at once, so you only set it once.

To add it, drop an HTML embed anywhere on the page or open the custom code area in the page settings, and include a small style block that sets scroll-behavior to smooth on html. That is the whole change. There is no script, no library, and nothing to maintain. Modern browsers handle the animation for you.

Preview the page again and click a nav item. Now the page glides to the section instead of jumping. This is a case where less code is better. In the past people reached for heavy scroll libraries, but a single CSS line now does the job that used to need a plugin.

How do I stop a fixed navbar from covering the section title?

Add scroll-padding-top to the html element, set to the height of your navbar. Without it, a sticky navbar sits on top of the section you jumped to and hides the heading. Scroll-padding-top tells the browser to stop a little lower, so the title lands below the bar in clear view.

This is the fix almost everyone misses. You wire up the links, the smooth scroll works, and then you notice the section heading is tucked behind the fixed menu. It looks broken, but it is a one-line fix. If your navbar is 80 pixels tall, set scroll-padding-top to 80 pixels or a touch more for breathing room.

Put this rule in the same style block as your smooth scroll rule, both on the html element. Together they make anchor navigation feel professional. The page glides, and it stops in exactly the right place every time. Small detail, big difference in how finished the site feels.

Should I use jump links inside long blog posts too?

Yes, jump links work beautifully inside long articles. A table of contents at the top, with each item linking to a heading ID, lets readers skip to the part they want. The same three pieces apply. Give each heading an ID, link the contents to those IDs, and smooth scroll ties it together.

Long-form content is where this pays off most, because scrolling through two thousand words to find one section is a chore. A jump-link contents list respects the reader's time. I built out that exact pattern in my walkthrough of a sticky table of contents for Webflow blog posts, which keeps the list visible as people read.

One caution for blog posts. If your headings live inside a rich text field, you may need to add IDs through custom attributes or an embed, since the rich text editor does not always expose an ID field per heading. The idea is the same, the setup is just a little more hands-on.

What is the payoff for getting anchor navigation right?

The payoff is a page that feels fast and considerate. Visitors reach what they came for in one click, headings land in clear view, and the motion feels smooth instead of jarring. On a one-page site, that navigation is most of the user experience, so getting it right lifts the whole page.

There is a search benefit too. When your sections have clear IDs, Google can sometimes surface them as jump-to links right in the search result, sending people to the exact part of your page. The CSS target pseudo-class can even style whichever section a visitor jumped to, if you want that extra polish.

None of this needs a plugin or a heavy script in 2026. A few IDs, a few links, and two lines of CSS do the job that once took real code. If you want the navigation to feel even quicker between separate pages, that is a different tool, and I covered it in using speculation rules for instant Webflow navigation.

If you are building a one-page Webflow site and the navigation is not behaving the way you want, I am happy to help. Reach out and we can get your anchor links, smooth scroll, and navbar offset working cleanly so the page feels as polished as it should.