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
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" >w3wiki</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:
Contact Us