Menu

Scroll Smooth

If you are looking for an easy way to achieve smooth scrolling on your website, this plugin provides the solution.


Important: You must first import the plugin before using it.

import { scrollSmooth } from 'animatry'

Basic Usage

To enable smooth scrolling with the default settings, simply call:

scrollSmooth()

However, your HTML structure must follow a specific format. Place all scrollable content inside two nested wrappers as shown below:

<body>
  
  <nav>
    <!-- Place fixed-position elements outside the scrollable wrapper -->
  </nav>


  <div id="scroll-wrapper">
    <div id="scroll-content">
      <!-- Your main content here -->
    </div>
  </div>


</body>

Advanced Configuration

The plugin offers advanced options to customize the wrapper classes, scroll speed, and animation duration for both desktop and mobile devices.

scrollSmooth({
  wrapper: '.scroll-wrapper',   // Default: #smooth-wrapper
  content: '.scroll-content',   // Default: #smooth-content


  generateWrapper: false,       // Only set to true for static sites


  duration: 2,                  // Animation duration on devices with a mouse
  touchDuration: 0,             // Animation duration on touch devices


  speed: 1,                     // Scroll speed for mouse wheel
  touchSpeed: 1,                // Scroll speed for touch input
})

Configuration Options

Property
Description
wrapper
Selector for the outer scroll wrapper.
content
Selector for the inner scrollable content container.
generateWrapper
Whether to automatically generate wrapper elements (for static websites only).
duration
Scroll animation duration on devices with mouse input.
touchDuration
Scroll animation duration on touch devices.
speed
Scrolling speed for mouse wheel input.
touchSpeed
Scrolling speed for touch input.