smooth scrolling with a bootstrap navbar in react js

user_16079454 0
Viewed 834

I am trying to implement smooth scrolling in my web app, but I do not know how to do it with a navbar from bootstrap. Can you help me? Thanks!

import React, {Component} from 'react';
import {Nav} from 'react-bootstrap';
import {Navbar} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';


export default class Navigation extends Component{

render() {

 return(
  <div className="Navigation">   
    <Navbar bg='mywhite' variant='light' sticky='top' expand='sm'>
        <Navbar.Brand className='logo'>
            LOGO
        </Navbar.Brand>
        <Navbar.Toggle/>
        <Navbar.Collapse>
            <Nav>
                <Nav.Link activeClass='active' spy={true} smooth={true} offset={-70} duration={500} href='/'>Home</Nav.Link>
                <Nav.Link activeClass='active' spy={true} smooth={true} offset={-70} duration={500} href='/aboutme'>About me</Nav.Link>
                <Nav.Link activeClass='active' spy={true} smooth={true} offset={-70} duration={500} href='/skills'>Skills</Nav.Link>
                <Nav.Link activeClass='active' spy={true} smooth={true} offset={-70} duration={500} href='/projects'>Projects</Nav.Link>
                <Nav.Link activeClass='active' spy={true} smooth={true} offset={-70} duration={500} href='/motivation'>Motivation</Nav.Link>
            </Nav>
        </Navbar.Collapse>

    </Navbar>
  </div>
)

} }

bootstrap-4 reactjs
2 Answers

add this code in the 'head' of your index.html file inside public

<style>
html {
   scroll-behavior: smooth;
}
</style>
user_149574550

For Smooth scroll you can use css property of scroll behavior.

html {
  scroll-behavior: smooth;
}
user_77709420
Related