Smooth scroll

Bootstrap 5 Smooth scroll

Bootstrap 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.

Note: Read the API tab to find all available options and advanced customization

Basic example

Click on the links below to see the live example

To achieve a Smooth Scroll effect, add the mdbSmoothScroll directive to your link.

Smooth Scroll to #section-1

Here it is #section-1

        
            
            <a href="#section-1" mdbSmoothScroll>Smooth Scroll to #section-1</a>

Custom container

By adding [container] input you can set container in which you want smooth scroll.

Smooth Scroll to #section-2

Here it is #section-2

        
            
            <div #container style="overflow-y: auto; height: 100px; width: 100%; text-align: center;">
              <a href="#section-2" mdbSmoothScroll [container]="container"
                >Smooth Scroll to #section-2</a
              >
              <div style="height: 100px;"></div>
              <section id="section-2" class="mt-5 text-center">
                <p>Here it is #section-2</p>
              </section>
              <div style="height: 500px;"></div>
            </div>

Custom offset

By adding [offset] input you can set custom offset from element.

Smooth Scroll to #section-3

Here it is #section-3

        
            
            <a href="#section-3" mdbSmoothScroll [offset]="25">Smooth Scroll</a>

Custom duration

By adding [duration] input you can set custom duration of smooth scroll.

Smooth Scroll to #section-4

Here it is #section-4

        
            
            <a href="#section-4" mdbSmoothScroll [duration]="4000">Smooth Scroll</a>

Custom easing

By adding [easing] input you can set other scroll's motion option

Smooth Scroll to #section-5

Here it is #section-5/p>

        
            
            <a href="#section-5" mdbSmoothScroll [easing]="'easeInOutQuart'">Smooth Scroll</a>

Container away from viewport

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

Smooth Scroll to #section-6 
        
            
            <a href="#section-6" mdbSmoothScroll [container]="container" [offset]="25"
              >Smooth Scroll to #section-6</a
            >
            <div style="height: 2000px;"></div>
            <div #container style="overflow-y: auto; height: 100px; width: 100%; text-align: center;">
              <div style="height: 100px;"></div>
              <section id="section-6" class="mt-4 text-center">
                <p>Here it is #section-6</p>
              </section>
              <div style="height: 500px;"></div>
            </div>

Section to scroll is below:

Here it is #section-6/p>

Smooth scroll - API

Import

        
            
          import { MdbSmoothScrollModule } from 'mdb-angular-ui-kit/smooth-scroll';
          …
          @NgModule ({
            ...
            imports: [MdbSmoothScrollModule],
            ...
          })

Inputs

Name Type Default Description
container HTMLElement - Defines scrolling container
duration number 500 Changes scroll duration
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

Outputs

Name Type Description
scrollStart EventEmitter<void> Event fired when scrolling start
scrollEnd EventEmitter<void> Event fired when scrolling ends
scrollCancel EventEmitter<void> Event fired when scrolling is canceled 
        
            
              <a href="#section-1" mdbSmoothScroll (scrollStart)="onScrollStart()">Smooth Scroll to #section-1</a>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({ selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
              })
              export class AppComponent {
                onScrollStart() {
                  console.log('scrolling start');
                }
              }

Methods

Name Description Example
cancelScroll Manually cancel scrolling smoothScroll.cancelScroll() 
        
            
              <a href="#section-1" #scroll mdbSmoothScroll (click)="onClick()">Smooth Scroll to #section-1</a>
            
        
    
        
            
              import { Component, ViewChild } from '@angular/core';
              import { MdbSmoothScrollDirective } from 'mdb-angular-ui-kit/smooth-scroll';

              @Component({ selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
              })
              export class AppComponent {
                @ViewChild('scroll', { static: true }) scroll!: MdbSmoothScrollDirective;

                constructor() {}

                onClick(): void {
                  if (this.scroll) {
                    setTimeout(() => {
                      this.scroll.cancelScroll();
                    }, 100);
                  }
                }
              }