How to add smooth srcolling and scroll feature in react without react-scroll package

Question

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;

Sheetal Singh · Accepted Answer · 2022-10-22 12:36:24Z

8

html {
  scroll-behavior: smooth;
}

This worked for me!

answered Oct 22, 2022 at 12:36

Sheetal Singh

1011 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chudy91 · Accepted Answer · 2022-04-01 14:39:40Z

7

Simple CSS scroll-behavior: smooth doesn’t work for you? docs

answered Apr 1, 2022 at 14:39

chudy91

4685 silver badges19 bronze badges

1 Comment

Ritankar Bhattacharjee Over a year ago

That is working the problem is how to make to it scroll to the component rather making it render out seperately. Is the question unclear should I make an edit??

Sumeet Kumar · Accepted Answer · 2022-10-31 23:08:09Z

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)

starball · Accepted Answer · 2023-08-19 21:46:14Z

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>

Anyadi Onyekachukwu · Accepted Answer · 2022-10-03 17:27:12Z

-1

Target the div you want to scroll to using id Then on the link add href="#id"

answered Oct 3, 2022 at 17:27

Anyadi Onyekachukwu

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to add smooth srcolling and scroll feature in react without react-scroll package

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related