How to Implement Smooth Scrolling in Action Using React-bootstrap

Smooth scrolling in React Bootstrap ensures a seamless transition between different sections of a webpage. It allows users to smoothly navigate to a specific component when they click on a particular button or tag.

Prerequisite

• React JS
• react-bootstrap
• NPM (Node Package Manager)

Approach

• Using React Bootstrap’s Container, Row, Col, and Button components for layout and interactive elements.
• Using smooth scrolling functionality using JavaScript by scrolling to section elements upon button clicks.
• Style the button using Bootstrap classes for primary color and hover effect. Set text color for the title using a Bootstrap class.
• Implement smooth scrolling by selecting the target section using getElementById and scrolling into view with { behavior: ‘smooth’ }.
• Repeat steps for other sections, defining unique IDs for each. The smooth scroll effect is achieved by clicking buttons.

Steps to create React Application And Installing Module

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install react-bootstrap bootstrap

Step 4: Import Bootstrap CSS In Index.js file via following statement.

import 'bootstrap/dist/css/bootstrap.min.css';

The updated dependencies in package.json file will look like:

"dependencies": {
    "bootstrap": "5.3.2",
    "loader-utils": "3.2.1",
    "react": "18.2.0",
    "react-bootstrap": "2.9.1",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1"
},

Project Structure:

Example: Implementation of above approach in the App.js file.

Javascript

// App.js
import React from "react";
import { Container, Row, Col, Button } from "react-bootstrap";

const App = () => {
  const scrollToSection = (sectionId) => {
    const section = document.getElementById(sectionId);
    section.scrollIntoView({ behavior: "smooth" });
  };

  const buttonHoverStyle = {
    backgroundColor: "lightgreen",
    borderColor: "#007bff",
    border: "none",
    padding: "10px",
    display: "block",
    width: "max-width",
    margin: "auto",
    color: "white"
  };

  return (
    <Container fluid>
      <Row id="homePage"
           className="justify-content-center align-items-center
                      bg-primary text-white"
           style={{ minHeight: "99vh" }}>
        <Col className="text-center">
          <h1 className="text-success">GeeksforGeeks</h1>
          <p>A computer science portal</p>
          <Button variant="primary"
                  className="mt-4"
                  style={buttonHoverStyle}
                  onClick={() => scrollToSection("section1")}>
            Section 1
          </Button>
        </Col>
      </Row>
      <Row  id="section1"
            className="justify-content-center align-items-center"
            style={{ minHeight: "100vh",
                     backgroundColor: "gray",
                     padding: "10px" }}>
        <Col className="text-center">
          <h2>Section One</h2>
          <p>
            JavaScript is a lightweight, cross-platform, single-threaded, and
            interpreted compiled programming language. It is also known as the
            scripting language for webpages. It is well-known for the
            development of web pages, and many non-browser environments
            also use it.
          </p>
          <Button variant="primary"
                  className="mt-4"
                  style={buttonHoverStyle}
                  onClick={() => scrollToSection("section2")}>
            Scroll to First page
          </Button>
        </Col>
      </Row>
      <Row  id="section2"
            className="justify-content-center align-items-center"
            style={{ minHeight: "100vh",
                     backgroundColor: "pink",
                     padding: "10px" }}>
        <Col className="text-center">
          <h2>Section Two</h2>
          <p>
            ReactJS is a declarative, efficient, and flexible JavaScript
            library for building user interfaces. It is an open-source,
            component-based front-end library that is responsible
            only for the view layer of the application.
          </p>
          <Button variant="primary"
                  className="mt-4"
                  style={buttonHoverStyle}
                  onClick={() => scrollToSection("homePage")}>
            Scroll to First page
          </Button>
        </Col>
      </Row>
    </Container>
  );
};

export default App;

Steps to run application:

Step 1: Write the following command in your terminal

npm run start

Step 2: Open Browser and search the given URL in browser.

http://localhost:3000/

Output: