I want to add smooth scrolling feature in my react website. I have a header component that holds the navigation bar which has three links concerned Home, Service, About. The Service and the About is linked to their respective components i.e. Service.js and About.js. Now I have a made a Home component that holds the three components inside it ie, Hero, Service, About, hence, in the home page these components are stacked below eachother .I want that whenever the user clicks the Links in the header it should scroll down to that sepcific component rather then navigating to the component and rendering it seperately.
I tried using react-scroll package from a tutorial and it worked as expected but then I realised that the links don't work anymore as real links. So a user if suppose in the login page he doesn't get redirected to the home page if he clicks the home link or the service link or the about. I am new to react and have no idea how to do it. Please suggest me a way to make smooth scrolling.
Below are the codes.
Header.js
function Header() {
return (
<Nav>
<Link to="/">
<Logo src="/images/logo_name_header.svg" />
</Link>
<NavMenu>
<ul>
<li>
<Link to="/">
<span>Home</span>
</Link>
</li>
<li>
<Link to="/service">
<span>Service</span>
</Link>
</li>
<li>
<Link to="/about-us">
<span>About Us</span>
</Link>
</li>
<li>
<Link to="/contact">
<span>Contact Us</span>
</Link>
</li>
<li>
<Link to="/register">
<div className="cta-register">Register</div>
</Link>
</li>
<li>
<Link to="/login">
<span>Login</span>
</Link>
</li>
</ul>
</NavMenu>
</Nav>
);
}
export default Header;
Home.js
function Home() {
return (
<Container>
<Hero />
<Service />
<About />
</Container>
);
}
export default Home;
I want to add smooth scrolling feature in my react website. I have a header component that holds the navigation bar which has three links concerned Home, Service, About. The Service and the About is linked to their respective components i.e. Service.js and About.js. Now I have a made a Home component that holds the three components inside it ie, Hero, Service, About, hence, in the home page these components are stacked below eachother .I want that whenever the user clicks the Links in the header it should scroll down to that sepcific component rather then navigating to the component and rendering it seperately.
I tried using react-scroll package from a tutorial and it worked as expected but then I realised that the links don't work anymore as real links. So a user if suppose in the login page he doesn't get redirected to the home page if he clicks the home link or the service link or the about. I am new to react and have no idea how to do it. Please suggest me a way to make smooth scrolling.
Below are the codes.
Header.js
function Header() {
return (
<Nav>
<Link to="/">
<Logo src="/images/logo_name_header.svg" />
</Link>
<NavMenu>
<ul>
<li>
<Link to="/">
<span>Home</span>
</Link>
</li>
<li>
<Link to="/service">
<span>Service</span>
</Link>
</li>
<li>
<Link to="/about-us">
<span>About Us</span>
</Link>
</li>
<li>
<Link to="/contact">
<span>Contact Us</span>
</Link>
</li>
<li>
<Link to="/register">
<div className="cta-register">Register</div>
</Link>
</li>
<li>
<Link to="/login">
<span>Login</span>
</Link>
</li>
</ul>
</NavMenu>
</Nav>
);
}
export default Header;
Home.js
function Home() {
return (
<Container>
<Hero />
<Service />
<About />
</Container>
);
}
export default Home;
5 Answers
Reset to default 7html {
scroll-behavior: smooth;
}
This worked for me!
Simple CSS scroll-behavior: smooth doesn’t work for you? docs
First add ids to your components.
Hero.js
function Hero() {
return (
<section id="Hero">
//..
</section>
);
}
Service.js
function Service() {
return (
<section id="Service">
//..
</section>
);
}
About.js
function About() {
return (
<section id="About">
//..
</section>
);
}
Then update your Header.js by adding #id of that component in the link and use "href" instead of "to". Note: don't forget to use "/" in the href. Eg:
<Link href="/#id">
Header.js
function Header() {
return (
<Nav>
<Link to="/">
<Logo src="/images/logo_name_header.svg" />
</Link>
<NavMenu>
<ul>
<li>
<Link to="/">
<span>Home</span>
</Link>
</li>
<li>
<Link href="/#Hero">
<span>Hero</span>
</Link>
</li>
<li>
<Link href="/#Service">
<span>Service</span>
</Link>
</li>
<li>
<Link href="/#About">
<span>About</span>
</Link>
</li>
<li>
<Link to="/contact">
<span>Contact Us</span>
</Link>
</li>
<li>
<Link to="/register">
<div className="cta-register">Register</div>
</Link>
</li>
<li>
<Link to="/login">
<span>Login</span>
</Link>
</li>
</ul>
</NavMenu>
</Nav>
);
}
export default Header;
And for smooth scrolling, you got it right, you may use: (https://www.npmjs.com/package/react-scroll)
You can create a function inside your Header component like this.
function Header() {
const handleClickScroll = (id) => {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
};
return (
<Nav>
<Link to="/">
<Logo src="/images/logo_name_header.svg" />
</Link>
<NavMenu>
<ul>
<li
onClick={() => handleClickScroll("bio")}
>
Bio
</li>
<li
onClick={() => handleClickScroll("about")}
>
About
</li>
<li
onClick={() => handleClickScroll("projects")}
>
Projects
</li>
<li
onClick={() => handleClickScroll("contact")}
>
Contact
</li>
</ul>
</NavMenu>
</Nav>
);
}
export default Header;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>Then inside each component add an id with the same name you've passed on that function, like this:
import React from "react";
import Card from "../Card/Card";
const Portfolio = () => {
return (
<div id="projects">
// your JSX goes here ...
</div>
);
};
export default Portfolio;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Target the div you want to scroll to using id Then on the link add href="#id"