## Smooth Scroll
Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/advanced-features/smooth-scroll
Updated: 2026-09-06
Monogram includes a smooth scrolling engine powered by **GSAP ScrollSmoother**. Instead of the default browser scroll, the page content follows your scroll input with a graceful, cinematic easing - giving your site a polished, premium feel.
Smooth scroll is **desktop-only**. On mobile and touch devices the theme falls back to native browser scrolling for the best performance and user experience. It is also automatically disabled inside the Elementor editor so it does not interfere with your page-building workflow.
## How It Works
When enabled, ScrollSmoother wraps your page content in a special container and translates it with GSAP instead of relying on the browser built-in scroll. The result is a buttery-smooth motion where the page catches up to your scroll position at a controlled speed.
The engine automatically refreshes its calculations after lazy-loaded images, fonts, and other deferred content finish loading. This prevents layout shifts from throwing off scroll positions.
## Settings
Navigate to **Appearance > Customize > Smooth Scroll** to configure the feature.
### General Tab
Setting | Type | Default | Description |
|---|
Enable Smooth Scroll | Toggle | On | Master switch. When off, the site uses native browser scrolling. |
Scroll Smoothness | Slider (0.5-3.0) | 1.75 | Controls how smooth the scroll feels on desktop. Higher values create a more cinematic, floaty scroll but may feel less responsive. A range of 1.0-1.5 is recommended for most sites. |
Touch Smoothness | Slider (0-1.0) | 0.1 | Smoothing factor for touch devices. Keep this low (0.05-0.2) so touch scrolling still feels natural. |
### Advanced Tab
Setting | Type | Default | Description |
|---|
Effects Selector | Text | .jkd-smooth
| CSS selector for elements that receive scroll-based parallax effects. Any element matching this selector can use ScrollSmoother speed and lag attributes. |
Wrapper Selector | Text | #site-content
| The outer wrapper element that ScrollSmoother needs. You should not change this unless you have customized the theme HTML structure. |
Content Selector | Text | #content-inner
| The inner scrollable content element. Like the wrapper, leave this at the default unless you have modified the theme markup. |
## Tips
- If your page feels too "floaty," lower the **Scroll Smoothness** value toward 1.0.
- To add parallax effects to an element, give it the class matching your **Effects Selector** (`.jkd-smooth` by default) and add a `data-speed` attribute (e.g., `data-speed="0.8"` to scroll slower than the page).
- You can temporarily disable smooth scroll for testing by adding `?smooth_scroll_enabled=false` to any page URL.
Smooth scroll requires GSAP ScrollSmoother, which is bundled with the theme. No additional plugins are needed.