Intro
Tailor your navigation perfectly by expanding the native page settings inside Elements. Custom Scroll seamlessly upgrades your layout to make scrolling feel more fluid. It enhances the mouse wheel, keyboard arrows, and anchor links with beautifully timed motion. Setup is fully automated, optimizing responsiveness to deliver a smoother overall web experience. Customize speed, inertia, and navigation response for trackpads, mouse wheels, keyboard controls, and anchor links.
Get complete 3-in-1 navigation management for both large or small sites, and long or short pages.
Adjusting scroll speed and arrow steps lets you easily balance the full control of every project. The three settings are completely independent. You can enable or disable them selectively.
AI ready
Fully compatible with the Elements AI Assistant. Every option now carries a clear, plain-language description, so the AI understands what each setting does, how the options work together, and the best way to use the component.
Just describe the feel you want. Ask for "a slower, softer scroll with smooth jumps to page sections" and the AI sets speed, inertia and anchor timing for you. It also knows the limits, such as leaving keyboard control off on pages with forms.
1: Custom Scroll
For mouse wheels and trackpads.
✓ Custom Scroll replaces standard browser scrolling with an animation loop.This option intercepts mouse wheel events to apply a progressive interpolation.It eliminates sudden visual jumps, stabilizing long layouts during quick scrolling.
2: Scroll to #ID target
For internal anchor and button links
✓ Scroll to Target controls internal anchor links pointing to element IDs.This option replaces the immediate native jump with a timed animation curve.It synchronizes with inertia variables to prevent conflicts during the transition.
3: Keyboard
For keyboard arrows ↑ ↓
✓ Keyboard Support applies custom scrolling logic to keyboard navigation inputs. This option maps Arrow keys to trigger the animation steps. It operates as an extension of the wheel engine or as a standalone script.
ⓘ This component affects the Elements code and does not add anything visible to the layout. Simply drag it in and edit the options. Then export and preview in the browser.
Advanced
✓ Custom Class & Safety settings for mobile phones and smaller screens.