Smooth scroll

React 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, use MDBSmoothScroll component.

Smooth Scroll to #section-1 
import React, { useRef } from 'react';
import { MDBSmoothScroll } from 'mdb-react-ui-kit';

export default function App() {
  const sectionOneRef = useRef(null);

  return (
    <MDBSmoothScroll targetRef={sectionOneRef}>Smooth Scroll</MDBSmoothScroll>
  );
}

Here it is #section-1

Custom container

By adding containerRef property you can set container in which you want smooth scroll.

Smooth Scroll to #section-2

Here it is #section-2

import React, { useRef } from 'react';
import { MDBSmoothScroll } from 'mdb-react-ui-kit';

export default function App() {
  const sectionTwoRef = useRef(null);
  const containerOneRef = useRef(null);

  return (
    <div
      ref={containerOneRef}
      style={{ overflowY: 'auto', height: '100px', width: '100%', textAlign: 'center' }}
    >
      <MDBSmoothScroll targetRef={sectionTwoRef} containerRef={containerOneRef}>
        Smooth Scroll to #section-2
      </MDBSmoothScroll>
      <div style={{ height: '100px' }}></div>
      <section ref={sectionTwoRef} className='mt-5 text-center'>
        <p>Here it is #section-2</p>
      </section>
      <div style={{ height: '500px' }}></div>
    </div>
  );
}

Custom offset

By adding offset property you can set custom offset from element.

Smooth Scroll to #section-3

Here it is #section-3

import React, { useRef } from 'react';
import { MDBSmoothScroll } from 'mdb-react-ui-kit';

export default function App() {
  const sectionThreeRef = useRef(null);
  const containerTwoRef = useRef(null);

  return (
    <div
      ref={containerTwoRef}
      style={{ overflowY: 'auto', height: '100px', width: '100%', textAlign: 'center' }}
    >
      <MDBSmoothScroll targetRef={sectionThreeRef} containerRef={containerTwoRef} offset={25}>
        Smooth Scroll to #section-3
      </MDBSmoothScroll>
      <div style={{ height: '100px' }}></div>
      <section ref={sectionThreeRef} className='mt-4 text-center'>
        <p>Here it is #section-3</p>
      </section>
      <div style={{ height: '500px' }}></div>
    </div>
  );
}

Custom duration

By adding duration property you can set custom duration of smooth scroll.

Smooth Scroll to #section-4

Here it is #section-4

import React, { useRef } from 'react';
import { MDBSmoothScroll } from 'mdb-react-ui-kit';

export default function App() {
  const sectionFourRef = useRef(null);
  const containerThreeRef = useRef(null);

  return (
    <div
      ref={containerThreeRef}
      style={{ overflowY: 'auto', height: '100px', width: '100%', textAlign: 'center' }}
    >
      <MDBSmoothScroll targetRef={sectionFourRef} containerRef={containerThreeRef} duration={3000}>
        Smooth Scroll to #section-4
      </MDBSmoothScroll>
      <div style={{ height: '100px' }}></div>
      <section ref={sectionFourRef} className='mt-4 text-center'>
        <p>Here it is #section-4</p>
      </section>
      <div style={{ height: '500px' }}></div>
    </div>
  );
}

Custom easing

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

Smooth Scroll to #section-5

Here it is #section-5/p>

import React, { useRef } from 'react';
import { MDBSmoothScroll } from 'mdb-react-ui-kit';

export default function App() {
  const sectionFiveRef = useRef(null);
  const containerFourRef = useRef(null);

  return (
    <div
      ref={containerFourRef}
      style={{ overflowY: 'auto', height: '100px', width: '100%', textAlign: 'center' }}
    >
      <MDBSmoothScroll
        targetRef={sectionFiveRef}
        containerRef={containerFourRef}
        duration={1000}
        easing={(t: any) => {
          t /= 0.5;
          if (t < 1) return 0.5 * t * t * t * t;
          t -= 2;
          return -(t * t * t * t - 2) / 2;
        }}
      >
        Smooth Scroll to #section-5
      </MDBSmoothScroll>
      <div style={{ height: '100px' }}></div>
      <section ref={sectionFiveRef} className='mt-4 text-center'>
        <p>Here it is #section-5</p>
      </section>

      <div style={{ height: '500px' }}></div>
    </div>
  );
}

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 
import React, { useRef } from 'react';
import { MDBSmoothScroll } from 'mdb-react-ui-kit';

export default function App() {
  const sectionSixRef = useRef(null);
  const containerFiveRef = useRef(null);

  return (
    <>
      <MDBSmoothScroll
        targetRef={sectionSixRef}
        containerRef={containerFiveRef}
        duration={1200}
        easing={(t: any) => {
          return t * t * t * t;
        }}
      >
        Smooth Scroll to #section-6
      </MDBSmoothScroll>
      <div
        ref={containerFiveRef}
        className='border p-2'
        style={{ overflowY: 'auto', height: '100px', width: '100%', textAlign: 'center' }}
      >
        <div style={{ height: '100px' }}></div>
        <section ref={sectionSixRef} className='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 { MDBSmoothScroll } from 'mdb-react-ui-kit';

Properties

MDBSmoothScroll

Name Type Default Description Example
containerRef React.RefObject<any> body Reference to container element <MDBSmoothScroll containerRef={exampleRef}>...</MDBSmoothScroll>
duration Number 500 Changes duration of smooth scroll. <MDBSmoothScroll duration={2000} >...</MDBSmoothScroll>
easing 'motionLinear' | 'motionEaseInQuad' | 'motionEaseInCubic' | 'motionEaseInQuart' | 'motionEaseInQuint' | 'motionEaseInOutQuad' | 'motionEaseInOutCubic' | 'motionEaseInOutQuart' | 'motionEaseInOutQuint' | 'motionEaseOutQuad' | 'motionEaseOutCubic' | 'motionEaseOutQuart' | 'motionEaseOutQuint' 'motionLinear' Changes motion type of smooth scroll. <MDBSmoothScroll easing='motionEaseOutCubic' >...</MDBSmoothScroll>
offset Number 0 Changes offset from element. <MDBSmoothScroll offset={400} >...</MDBSmoothScroll>
tag String 'div' Defines tag of the MDBSmoothScroll wrapper <MDBSmoothScroll tag="span">...</MDBSmoothScroll>
targetRef React.RefObject<any> - Reference to target element <MDBSmoothScroll targetRef={exampleRef}>...</MDBSmoothScroll>