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


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


Custom offset

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

Smooth Scroll to #section-3

Here it is #section-3


Custom duration

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

Smooth Scroll to #section-4

Here it is #section-4


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>


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

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-smooth-scroll',
            templateUrl: './smooth-scroll.component.html',
            styleUrls: ['./smooth-scroll.component.scss'],
          })
          export class SmoothScrollComponent {
            onScrollStart() {
              console.log('scrolling start');
            }

            constructor() {}
          }
        

Outputs

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-smooth-scroll',
            templateUrl: './smooth-scroll.component.html',
            styleUrls: ['./smooth-scroll.component.scss'],
          })
          export class SmoothScrollComponent {
            @ViewChild('scroll', { static: true }) scroll?: MdbSmoothScrollDirective;

            constructor() {}

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