search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Tailwind Smooth scroll method

    Tailwind CSS Smooth scroll

    Tailwind CSS smooth scroll is an animated movement from a trigger — such as button, link or any other clickable element — to another place of the same page.

    Required ES init: Smooth scroll *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using TW Elements ES format then you should pass the required components to the initTWE method.

    Basic example

    Click on the links below to see the live example.

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

    Smooth Scroll to #section-1

    Here it is #section-1

    • HTML
    • javascript
            
                
          <a
            href="#section-1"
            data-twe-smooth-scroll-init
            class="text-primary dark:text-primary-400"
            >Smooth Scroll to #section-1</a
          >
          
            
        
            
                
          // Initialization for ES Users
          import {
            SmoothScroll,
            initTWE,
          } from "tw-elements";
    
          initTWE({ SmoothScroll });
          
            
        

    Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Custom container

    By adding data-twe-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-twe-smooth-scroll-init
            data-twe-container="#demo-example-2"
            class="text-primary dark:text-primary-400"
            >Smooth Scroll to #section-2</a
          >
          
            
        
            
                
          // Initialization for ES Users
          import {
            SmoothScroll,
            initTWE,
          } from "tw-elements";
    
          initTWE({ SmoothScroll });
          
            
        

    Custom offset

    By adding data-twe-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-twe-smooth-scroll-init
            data-twe-offset="25"
            class="text-primary dark:text-primary-400"
            >Smooth Scroll to #section-3</a
          >
          
            
        
            
                
          // Initialization for ES Users
          import {
            SmoothScroll,
            initTWE,
          } from "tw-elements";
    
          initTWE({ SmoothScroll });
          
            
        

    Custom duration

    By adding data-twe-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-twe-smooth-scroll-init
            data-twe-duration="3000"
            class="text-primary dark:text-primary-400"
            >Smooth Scroll to #section-4</a
          >
          
            
        
            
                
          // Initialization for ES Users
          import {
            SmoothScroll,
            initTWE,
          } from "tw-elements";
    
          initTWE({ SmoothScroll });
          
            
        

    Custom easing

    By adding data-twe-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-twe-smooth-scroll-init
            data-twe-easing="easeInOutQuart"
            class="text-primary dark:text-primary-400"
            >Smooth Scroll to #section-5</a
          >
          
            
        
            
                
          // Initialization for ES Users
          import {
            SmoothScroll,
            initTWE,
          } from "tw-elements";
    
          initTWE({ 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-twe-smooth-scroll-init
            data-twe-container="#demo-example-6"
            data-twe-duration="1200"
            data-twe-easing="easeInQuart"
            class="text-primary dark:text-primary-400"
            >Smooth Scroll to #section-6</a
          >
          
            
        
            
                
          // Initialization for ES Users
          import {
            SmoothScroll,
            initTWE,
          } from "tw-elements";
    
          initTWE({ SmoothScroll });
          
            
        

    Section to scroll is below:

    Here it is #section-6


    Related resources

    Scroll back to top button Scrollbar Scrollspy
    • Basic example
    • Custom container
    • Custom offset
    • Custom duration
    • Custom easing
    • Scroll to viewport
    • Related resources

    Tailwind Smooth scroll method - API


    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 initTWE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { SmoothScroll, initTWE } from "tw-elements";
            initTWE({ SmoothScroll });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Usage

    Via data attributes

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

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

    Via JavaScript

    • javascript
    • umd
            
                
            const mySmoothScroll = new SmoothScroll(document.getElementById('smoothScroll'), options);
            
            
        
            
                
            const mySmoothScroll = new twe.SmoothScroll(document.getElementById('smoothScroll'), options);
            
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-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
            
                
            const mySmoothScrollEl = document.getElementById('mySmoothScroll');
            const smoothScroll = new SmoothScroll(mySmoothScrollEl);
            setTimeout(() => {
              smoothScroll.cancelScroll();
            }, 100);
            
            
        
            
                
            const mySmoothScrollEl = document.getElementById('mySmoothScroll');
            const smoothScroll = new twe.SmoothScroll(mySmoothScrollEl);
            setTimeout(() => {
              smoothScroll.cancelScroll();
            }, 100);
            
            
        

    Events

    Event type Description
    scrollCancel.twe.smoothScroll This event fires immediately after canceling smooth scrolling.
    scrollEnd.twe.smoothScroll This event fires immediately when the smooth scroll ends.
    scrollStart.twe.smoothScroll This event fires immediately when the smooth scroll is starting.
    • JavaScript
            
                
            const mySmoothScrollEl = document.getElementById('mySmoothScroll')
            mySmoothScrollEl.addEventListener('scrollEnd.twe.smoothScroll', function (e) {
                // do something...
            });
            
            
        
    • Import
    • Usage
    • Options
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO