Due to the fact that I have a lot of dynamic data, it is impossible to use navigation through the Link or <a> tag after updating the page or as soon as the page is loaded for the first time. Because as soon as the user wants to click on the button that will scroll to another section for the first time, he will see that the navigation has scrolled lower than necessary. In addition, after the first scrolling of the navigation, the scroller works as it should be, and stops where it needs to, unless the page is completely refreshed.

WorkingWithSection.tsx

import { cardItems } from "@/data";
import React from "react";
import Card from "./Card";
import SectionHeader from "./UI/SectionHeader";

const WorkingWithSection = () => {
  return (
    <section id="working-with" className="mb-28">
      <SectionHeader>WorkingWith</SectionHeader>
      <div className="flex flex-col gap-y-5 md:grid md:grid-cols-2 md:gap-5 lg:grid-cols-3">
        {cardItems.map((item, index) => (
          <Card
            key={item.id}
            icon={item.icon}
            title={item.title}
            description={item.description}
            addClasses={
              index === cardItems.length - 1
                ? "md:col-span-2 lg:order-3"
                : `lg:order-${index === cardItems.length - 2 ? "4" : index}`
            }
          />
        ))}
      </div>
    </section>
  );
};

export default WorkingWithSection;

Card.tsx

import React from "react";

interface CardProps {
  title: string;
  description: string[];
  addClasses: string;
  icon: React.ElementType;
}

const Card: React.FC<CardProps> = ({
  title,
  description,
  addClasses,
  icon: Icon,
}) => {
  return (
    <article
      className={`${addClasses} transition-card group flex flex-col items-center justify-start rounded-10 border-1 border-white-100 bg-transparent px-7 py-14 text-white-100 hover:bg-white-200 hover:fill-black-100 hover:text-black-100`}
    >
      <figure className="mb-6">
        <Icon className="h-16 w-16 fill-white-100 group-hover:fill-black-100" />
      </figure>
      <h3 className="mb-6 inline text-center text-2xl font-bold">{title}</h3>
      <ul className="inline-block list-inside list-disc px-5">
        {description.map((listItem, index) => (
          <li
            key={index}
            className="transition-text list-disc text-gray-300 group-hover:text-black-100"
          >
            {listItem}
          </li>
        ))}
      </ul>
    </article>
  );
};

export default Card;

##Just Link navigation with smooth behavior

"use client";

import React, { useLayoutEffect, useState } from "react";
import { Link } from "react-scroll";

interface ButtonNavigationProps {
  navigateTo: string;
  children: React.ReactNode;
}

const ButtonNavigation: React.FC<ButtonNavigationProps> = ({
  navigateTo,
  children,
}) => {
  return (
    <Link
      smooth={true}
      spy={true}
      isDynamic={true}
      to={navigateTo}
      offset={-120}
      duration={650}
      className="flex items-center justify-center gap-x-2 px-7 py-3 font-medium"
    >
      {children}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="24"
        viewBox="0 -960 960 960"
        width="24"
        fill="currentColor"
      >
        <path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z" />
      </svg>
    </Link>
  );
};

export default ButtonNavigation;

d

Most likely, this is the fault of the dynamic content of other sections, because when I comment on these dynamic sections, the scrolling works correctly. I also tried to use useLayoutEffect, but I hadn’t have good result(Maybe I did something incorrectly with this hook)