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

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


Custom offset

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

Smooth Scroll to #section-3

Here it is #section-3


Custom duration

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

Smooth Scroll to #section-4

Here it is #section-4


Custom easing

By adding easing 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 { MDBSmoothScroll } from 'mdb-react-ui-kit';
      

Properties

MDBSmoothScroll

Name Type Default Description Example
tag String 'div' Defines tag of the MDBSmoothScroll wrapper <MDBSmoothScroll tag="span">...</MDBSmoothScroll>
className String '' Add custom class to MDBSmoothScroll <MDBSmoothScroll className="class">...</MDBSmoothScroll>
duration Number 500 Changes duration of smooth scroll. <MDBSmoothScroll duration={2000} >...</MDBSmoothScroll>
offset Number 0 Changes offset from element. <MDBSmoothScroll offset={400} >...</MDBSmoothScroll>
easing Function (t: any) => { return t; } Changes motion type of smooth scroll. <MDBSmoothScroll 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; }} >...</MDBSmoothScroll>
containerRef Ref body Changes container of scrolling element. <MDBSmoothScroll containerRef={exampleRef}>...</MDBSmoothScroll>
targetRef Ref - Sets the target of the smooth scroll. <MDBSmoothScroll targetRef={exampleRef}>...</MDBSmoothScroll>