SmoothScroll

Smooth scroll is an animated movement from a trigger to another place of the same page.

Examples

CDBSmoothScroll

Default SmoothScroll example.

import React from "react";
import { CDBSmoothScroll, CDBContainer } from "cdbreact";
export const SmoothScroll = () => {
  const text = `Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.`
  return (
    <div className="text-white">
      <CDBSmoothScroll to="section1" className="p-3 bg-warning mr-3">Section 1</CDBSmoothScroll>
      <CDBSmoothScroll to="section2" className="p-3 bg-primary mr-3">Section 2</CDBSmoothScroll>
      <CDBSmoothScroll to="section3"  className="p-3 bg-success">Section 3</CDBSmoothScroll>
      <CDBContainer className="bg-warning p-4 mt-3" id="section1">
        {text}
      </CDBContainer>
      <CDBContainer className="bg-primary p-4" id="section2">
        {text}
      </CDBContainer>
      <CDBContainer className="bg-success p-4" id="section3">
        {text}
      </CDBContainer>
    </div>
  );
};

Disabled state

Simply add the disabled boolean attribute to CDBSmoothScroll

import React from "react";
import { CDBSmoothScroll, CDBContainer } from "cdbreact";
export const SmoothScroll = () => {
  return (
    <CDBContainer>
            <CDBSmoothScroll disabled/>
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the SmoothScroll component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast SmoothScroll Import Statement

You need to import the Contrast SmoothScroll component first before using it.

import { CDBSmoothScroll } from "cdbreact";

API Reference: Contrast SmoothScroll Properties

The table below shows the configuration options of the CDBSmoothScroll component.