Tailwind CSS Smooth scroll

Basic example

Click on the links below to see the live example.

To achieve a Smooth Scroll effect, add the data-te-smooth-scroll-init attribute to your link.

Here it is #section-1

HTML
javascript

        
            
      <a
        href="#section-1"
        data-te-smooth-scroll-init
        class="text-primary dark:text-primary-400"
        >Smooth Scroll to #section-1</a
      >

        
            
      // Initialization for ES Users
      import {
        SmoothScroll,
        initTE,
      } from "tw-elements";

      initTE({ SmoothScroll });

Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Custom container

By adding data-te-container attribute you can set container in which you want smooth scroll.

Smooth Scroll to #section-2

Here it is #section-2

HTML
javascript

        
            
      <a
        href="#section-2"
        data-te-smooth-scroll-init
        data-te-container="#demo-example-2"
        class="text-primary dark:text-primary-400"
        >Smooth Scroll to #section-2</a
      >

        
            
      // Initialization for ES Users
      import {
        SmoothScroll,
        initTE,
      } from "tw-elements";

      initTE({ SmoothScroll });

Custom offset

By adding data-te-offset attribute you can set custom offset from element.

Smooth Scroll to #section-3

Here it is #section-3

HTML
javascript

        
            
      <a
        href="#section-3"
        data-te-smooth-scroll-init
        data-te-offset="25"
        class="text-primary dark:text-primary-400"
        >Smooth Scroll to #section-3</a
      >

        
            
      // Initialization for ES Users
      import {
        SmoothScroll,
        initTE,
      } from "tw-elements";

      initTE({ SmoothScroll });

Custom duration

By adding data-te-duration attribute you can set custom duration of smooth scroll.

Smooth Scroll to #section-4

Here it is #section-4

HTML
javascript

        
            
      <a
        href="#section-4"
        data-te-smooth-scroll-init
        data-te-duration="3000"
        class="text-primary dark:text-primary-400"
        >Smooth Scroll to #section-4</a
      >

        
            
      // Initialization for ES Users
      import {
        SmoothScroll,
        initTE,
      } from "tw-elements";

      initTE({ SmoothScroll });

Custom easing

By adding data-te-easing you can set other scroll's motion option.

Smooth Scroll to #section-5

Here it is #section-5

HTML
javascript

        
            
      <a
        href="#section-5"
        data-te-smooth-scroll-init
        data-te-easing="easeInOutQuart"
        class="text-primary dark:text-primary-400"
        >Smooth Scroll to #section-5</a
      >

        
            
      // Initialization for ES Users
      import {
        SmoothScroll,
        initTE,
      } from "tw-elements";

      initTE({ SmoothScroll });

Container away from viewport

When you put container with overflow-scroll class away from viewport link firstly will scroll to this container then it will scroll container.

Smooth Scroll to #section-6

HTML
javascript

        
            
      <a
        href="#section-6"
        data-te-smooth-scroll-init
        data-te-container="#demo-example-6"
        data-te-duration="1200"
        data-te-easing="easeInQuart"
        class="text-primary dark:text-primary-400"
        >Smooth Scroll to #section-6</a
      >

        
            
      // Initialization for ES Users
      import {
        SmoothScroll,
        initTE,
      } from "tw-elements";

      initTE({ SmoothScroll });

Section to scroll is below:

Here it is #section-6

Import

Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { SmoothScroll, initTE } from "tw-elements";
        initTE({ SmoothScroll });

        
            
        import "tw-elements";

Usage

Via data attributes

Simply add data-te-smooth-scroll-init attribute to the anchor tag to initialize the Smooth Scroll component. For ES format, you must first import and call the initTE method.

HTML

        
            
        <a
          href="#section-1"
          data-te-smooth-scroll-init
          class="text-primary dark:text-primary-400"
          >Smooth Scroll to #section-1</a
        >

Via JavaScript

javascript
umd

ES UMD

        
            
        const mySmoothScroll = new SmoothScroll(document.getElementById('smoothScroll'), options);

        
            
        const mySmoothScroll = new te.SmoothScroll(document.getElementById('smoothScroll'), options);

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-container="".

Name	Type	Default	Description
`container`	String	`'body'`	Changes container of scrolling element with `overflow-scroll` class.
`duration`	Number	`500`	Changes duration of smooth scroll.
`easing`	String	`'linear'`	Changes motion type of smooth scroll, available easings: `'linear', 'easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInOutQuad' 'easeInOutCubic', 'easeInOutQuart', 'easeInOutQuint', 'easeOutQuad', 'easeOutCubic', 'easeOutQuart', 'easeOutQuint'`.
`offset`	Number	`0`	Changes offset from element.

Methods

Method	Description	Example
`cancelScroll`	Manually cancels smooth scroll.	`smoothScroll.cancelScroll();`
`dispose`	Manually disposes an instance.	`smoothScroll.dispose();`
`getInstance`	Static method which allows you to get the smooth scroll instance associated to a DOM element.	`SmoothScroll.getInstance(smoothScrollEl)`
`getOrCreateInstance`	Static method which returns the smooth scroll instance associated to a DOM element or create a new one in case it wasn't initialized.	`SmoothScroll.getOrCreateInstance(smoothScrollEl)`

javascript
umd

ES UMD

        
            
        const mySmoothScrollEl = document.getElementById('mySmoothScroll');
        const smoothScroll = new SmoothScroll(mySmoothScrollEl);
        setTimeout(() => {
          smoothScroll.cancelScroll();
        }, 100);

        
            
        const mySmoothScrollEl = document.getElementById('mySmoothScroll');
        const smoothScroll = new te.SmoothScroll(mySmoothScrollEl);
        setTimeout(() => {
          smoothScroll.cancelScroll();
        }, 100);

Events

Event type	Description
`scrollCancel.te.smoothScroll`	This event fires immediately after canceling smooth scrolling.
`scrollEnd.te.smoothScroll`	This event fires immediately when the smooth scroll ends.
`scrollStart.te.smoothScroll`	This event fires immediately when the smooth scroll is starting.

JavaScript

        
            
        const mySmoothScrollEl = document.getElementById('mySmoothScroll')
        mySmoothScrollEl.addEventListener('scrollEnd.te.smoothScroll', function (e) {
            // do something...
        });

Tailwind Smooth scroll method

Basic example

Custom container

Custom offset

Custom duration

Custom easing

Container away from viewport

Tailwind Smooth scroll method - API

Import

Usage

Via data attributes

Via JavaScript

Options

Methods

Events

Tailwind Smooth scroll method

Tailwind CSS Smooth scroll

Basic example

Custom container

Custom offset

Custom duration

Custom easing

Container away from viewport

Related resources

Tailwind Smooth scroll method - API

Import

Usage

Via data attributes

Via JavaScript

Options

Methods

Events