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>