React.js: How can I jump to different links smoothly when clicked on them?

Question

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;

Does this help answer your question? https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element — gloo, Apr 27 '22 at 16:37
Had forgotten to mention that I had checked this questions already before, it works only on the first element, but I have other components that follow after the About component. — Lasma, Apr 27 '22 at 17:14
I did, but yeah, as had mentioned, it did not work out... :( — Lasma, Apr 27 '22 at 23:34

score 1 · Accepted Answer · answered Apr 27 '22 at 20:09

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

Thank you, it works. I just had tried to complicate things more than I should have, what a neat solution from you! :) — Lasma, Apr 27 '22 at 23:49

React.js: How can I jump to different links smoothly when clicked on them?

1 Answers1