I’m facing an issue with implementing smooth scroll behavior in my React application. Despite trying multiple methods, the smooth scrolling effect is not working. I’ve attempted to apply smooth scrolling via CSS and JavaScript, but without success. I’ve also tested in different browsers, but the result remains the same.

Here is what I’ve tried so far:

1)CSS for Smooth Scrolling:

@import url(“https://fonts.googleapis.com/css2?family=Dancing+Script&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900&family=Ubuntu+Mono&display=swap”);

* {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  text-decoration: none;
  scroll-behavior: smooth;
}

html, body {
  scroll-behavior: smooth;
}

2)React Component with HashLink:

import React from "react";
import { Link } from "react-router-dom";
import { HashLink } from "react-router-hash-link";

const Header = () => {
  return (
    <nav>
      <h1>TechyStar.</h1>
      <main>
        <HashLink to={"/#home"}>Home</HashLink>
        <Link to={"/contact"}>Contact</Link>
        <HashLink to={"/#about"}>About</HashLink>
        <HashLink to={"/#brands"}>Brands</HashLink>
        <Link to={"/services"}>Services</Link>
      </main>
    </nav>
  );
};

export default Header;

3)JavaScript Solution in React Component:

import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import { HashLink } from "react-router-hash-link";

const Header = () => {

  useEffect(() => {
    // Add event listener for smooth scrolling
    const handleScroll = (event) => {
      event.preventDefault(); // Prevent default anchor click behavior
      const targetId = event.currentTarget.getAttribute("href").slice(1);
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        targetElement.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      }
    };

    const aboutLink = document.querySelector('a[href="#about"]');
    if (aboutLink) {
      aboutLink.addEventListener("click", handleScroll);
    }

    // Cleanup the event listener on component unmount
    return () => {
      if (aboutLink) {
        aboutLink.removeEventListener("click", handleScroll);
      }
    };
  }, []);

  return (
    <nav>
      <h1>TechyStar.</h1>
      <main>
        <HashLink to={"/#home"}>Home</HashLink>
        <Link to={"/contact"}>Contact</Link>
        <HashLink to={"/#about"}>About</HashLink>
        <HashLink to={"/#brands"}>Brands</HashLink>
        <Link to={"/services"}>Services</Link>
      </main>
    </nav>
  );
};

export default Header;

The smooth scrolling effect is not working on my navigation links when I try to scroll to different sections on the page.
I’ve ensured that IDs are correctly set for each target section, and I’ve tested the behavior across different browsers.