I have a navigation bar with several links and I would like to be able to bring a visitor to the dedicated component smoothly when clicking on one of the navigation items. All the components are below the navigation bar as I scroll through the app. I know how it can be simply done with just HTML and CSS when a static website is built, but as I tried to do the same way in React, it obviously did not work. Is it possible to do with just React, not using any packages (React Router, react-scroll etc.)? If so, how can I do it?
For reference with just HTML and CSS: https://codesandbox.io/s/objective-ganguly-fzqnrz?file=/index.html
This is what I would like to be able to do, but with a smooth transition and without packages. Here is the code:
Navigation.js (the href's are just placeholders to illustrate the idea)
const Navigation = () => {
return (
<header>
<nav>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</header>
);
};
export default Navigation;
About.js
const About = () => {
return (
<div>
<div>
<p>
{/* Content here... */}
</p>
</div>
</div>
);
};
export default About;
It is not something to do with React, it's just the behavior of html and css which you have to make some tweaks to see the smooth behavior, something like this:
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* here is what you need to add to your code */
html {
scroll-behavior: smooth;
}
#navigation {
background-color: rgb(101, 255, 55);
}
#navbar {
margin: 0 auto;
height: 60px;
}
ul {
list-style-type: none;
overflow: hidden;
float: right;
}
li {
float: left;
font-size: 20px;
margin-left: 10px;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 18px 18px;
border-radius: 20px;
text-decoration: none;
}
li a:hover {
color: #232cfa;
}
#content {
width: 100%;
height: 500px;
background-color: aqua;
}
#content-2 {
height: 200px;
background-color: salmon;
}
#footer {
height: 100px;
background-color: aquamarine;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Navigation Redirect</title>
</head>
<body>
<header id="navigation">
<nav id="navbar">
<ul>
<li>
<a href="#content">Content 1</a>
</li>
<li>
<a href="#content-2">Content 2</a>
</li>
<li>
<a href="#footer">Footer</a>
</li>
</ul>
</nav>
</header>
<div id="content">
<h1>Content</h1>
</div>
<div id="content-2">
<h2>Content 2</h2>
</div>
<footer id="footer">
<h3>Footer</h3>
</footer>
</body>
</html>if you want to see the sandbox code check this link: https://codesandbox.io/s/festive-cdn-t2jzgf?file=/index.html:0-844
and if you want to work with elements ref in React you can use it this way
element.scrollIntoView({behavior: "smooth"});
Based on your file structure this might be a little harder to pass around the refs to your Navigation components, so I suggest go with the CSS way