Learn how to create instant scroll effects in Webflow using lightweight custom code. Improve navigation, control scroll behaviour, and enhance UX without plugins.
Instant scrolling is a simple but powerful technique for improving navigation and user experience on Webflow websites. In some cases, smooth scrolling can feel slow, imprecise, or visually distracting—especially for utility links, jump menus, or accessibility-focused layouts. In this tutorial, you’ll learn how to create instant scroll behaviour in Webflow by using a custom attribute, without relying on heavy JavaScript libraries or complex interactions.
This method is lightweight, CMS-safe, and easy to reuse across projects.
Instant scroll refers to immediately jumping the viewport to a target section on the page without any animation. Unlike smooth scrolling, which animates the movement over time, instant scroll moves the page position immediately when a link or button is clicked.
This behaviour is ideal when speed, clarity, or precision is more important than animation.
While smooth scrolling can look polished, it is not always the best choice. Some common reasons to disable it include:
– Faster navigation for long pages
– Avoiding motion sensitivity issues for users
– Cleaner behaviour for anchor-based navigation
– More predictable scroll positioning
– Better control when using fixed or sticky headers
Instant scroll is especially useful for menus, skip links, and call-to-action buttons that need to feel immediate.
The data-scroll-time attribute controls how long the scroll animation lasts. When this value is set to 0, the scroll animation duration is removed entirely, resulting in an instant jump to the target section.
Adding data-scroll-time="0" to a link or button ensures that clicking it scrolls immediately instead of animating.
This approach works cleanly alongside Webflow’s native anchor linking and does not interfere with CMS content or page load behaviour.
To implement instant scroll:
Once applied, the scroll behaviour for that element will switch from smooth to instant.
Yes. Instant scroll works well with fixed or sticky navigation layouts. Because there is no animation, the page lands immediately on the calculated position. If your site uses a fixed header, you can pair this approach with an offset in your scroll logic to prevent content from being hidden underneath the navbar.
This makes instant scroll more predictable than default anchor behaviour in many layouts.
Using instant scroll on CMS pages
Instant scroll works on CMS template pages as long as the target elements exist on the page. This makes it suitable for blog posts, service templates, landing pages, and dynamically generated layouts.
You can reuse the same attribute pattern across multiple CMS items without modification.
Performance and SEO considerations
This technique does not negatively impact SEO. All content remains fully accessible to search engines, and no JavaScript is executed until a user interacts with the page. Because the solution is lightweight, it has virtually no performance overhead.
– Keep scripts minimal
– Avoid stacking multiple scroll handlers
– Test behaviour across breakpoints
Instant scroll is best used when navigation speed and clarity matter more than visual motion. It works particularly well for:
– One-page layouts
– Utility navigation links
– Accessibility-focused designs
– Large content-heavy pages
Smooth scrolling still has its place, but instant scroll gives you full control when animation is unnecessary.
Using data-scroll-time="0" is one of the simplest ways to control scroll behaviour in Webflow. It’s clean, reusable, and avoids overengineering a problem that often only needs a small adjustment. If you want precise, predictable navigation without visual delay, instant scroll is a solid solution to keep in your Webflow toolkit.
