One-Page Scrolling
Explore the powerful ScrollManager features in Now.js
Key Features
Everything you need for modern scrolling experiences
Smooth Scrolling
Customizable smooth scrolling with multiple easing functions and animation support.
Waypoints
Trigger actions when elements enter the viewport using Intersection Observer.
Parallax Effects
Create depth and visual interest with configurable parallax backgrounds.
Scroll Progress
Visual progress indicator showing scroll position in the page.
Section Navigation
Automatic section highlighting and hash updates during scrolling.
Mobile Support
Touch-optimized with momentum scrolling and mobile-specific features.
Accessibility
ARIA support, keyboard navigation, and screen reader announcements.
Performance
Optimized with RAF, throttling, debouncing, and efficient event handling.
Parallax Effects
Create stunning depth and visual interest
Layer 1
Speed: 0.2
Layer 2
Speed: 0.5
Layer 3
Speed: 0.8
Waypoints Demo
Elements animate when they enter the viewport
Fade In Up
This element fades in and slides up when you scroll to it.
Fade In Left
This element fades in from the left side.
Fade In Right
This element fades in from the right side.
Scale In
This element scales up from the center.
Rotate In
This element rotates as it appears.
Section Navigation
Navigation highlights automatically as you scroll through sections
Auto Hash Updates
The URL hash updates automatically as you scroll through different sections.
Nav Highlighting
Navigation links highlight to show which section is currently active.
Smooth Transitions
Clicking navigation links smoothly scrolls to the target section.
Interactive Demo
Try the ScrollManager features yourself
Scroll Actions
Progress Info
Events Log
Implementation
Learn how to implement these features
// Initialize ScrollManager with configuration
ScrollManager.init({
enabled: true,
// Core settings
core: {
offset: 80, // Offset for fixed header
duration: 800, // Animation duration
easing: 'easeInOutCubic'
},
// Enable smooth scrolling
smoothScroll: {
enabled: true,
selector: 'a[href^="#"]',
hashChangeEnabled: true,
autoScroll: true
},
// Scroll progress bar
scroll: {
progress: {
enabled: true,
color: 'var(--color-primary)',
height: '3px'
},
// Section highlighting
section: {
highlight: true,
threshold: 0.5,
activeClass: 'active'
},
// Navigation updates
nav: {
updateHash: true,
highlightClass: 'active',
smoothScroll: true
}
}
});<!-- HTML: Add data-parallax attribute -->
<div class="parallax-bg"
data-parallax
data-parallax-speed="0.5">
</div>
<!-- Multiple layers with different speeds -->
<div class="layer-1" data-parallax data-parallax-speed="0.3"></div>
<div class="layer-2" data-parallax data-parallax-speed="0.6"></div>
<div class="layer-3" data-parallax data-parallax-speed="0.9"></div>// JavaScript: Enable parallax in configuration
ScrollManager.init({
scroll: {
parallax: {
enabled: true,
speed: 0.5 // Default speed
}
}
});
// Or initialize manually
ScrollManager.initParallax();<!-- HTML: Add waypoint attributes -->
<div data-scroll-waypoint
data-waypoint-animation="fade-in-up">
Content appears when scrolled into view
</div>
<!-- Reveal effect -->
<div data-scroll-reveal
data-scroll-reveal-delay="200">
Revealed with delay
</div>// JavaScript: Add waypoint programmatically
ScrollManager.addWaypoint(element, {
offset: 0,
threshold: 0.5,
once: true,
callback: (entry) => {
console.log('Element is visible!', entry);
element.classList.add('animated');
}
});
// Listen to waypoint events
ScrollManager.on('waypoint:trigger', ({ id, entry }) => {
console.log(`Waypoint ${id} triggered`, entry);
});<!-- HTML: Setup navigation -->
<nav data-scroll-nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>
<!-- Mark sections -->
<section id="section1" data-scroll-section>
Section 1 content
</section>
<section id="section2" data-scroll-section>
Section 2 content
</section>// JavaScript: Programmatic scrolling
// Scroll to element
ScrollManager.scrollTo(element, {
offset: 80,
duration: 800,
easing: 'easeInOutCubic'
});
// Scroll to top
ScrollManager.scrollToTop();
// Scroll to bottom
ScrollManager.scrollToBottom();
// Get current position
const position = ScrollManager.getScrollPosition();// Listen to scroll events
ScrollManager.on('scroll:start', () => {
console.log('Scrolling started');
});
ScrollManager.on('scroll:end', () => {
console.log('Scrolling ended');
});
ScrollManager.on('section:active', ({ id }) => {
console.log('Active section:', id);
});
ScrollManager.on('waypoint:trigger', ({ id, entry }) => {
console.log('Waypoint triggered:', id, entry);
});
ScrollManager.on('scroll:progress', ({ percent, position }) => {
console.log(`Scrolled ${percent}% (${position}px)`);
});
// Custom scroll tracking
ScrollManager.on('scroll:update', ({
position,
direction,
percent
}) => {
// Update UI based on scroll
updateScrollIndicator(percent);
});Ready to Build Amazing Scrolling Experiences?
Explore the full documentation and start using ScrollManager in your projects