What is the solution for correcting a glitch in smooth scrolling behavior that occurs following the page's initial rendering?

Question

What is the solution for correcting a glitch in smooth scrolling behavior that occurs following the page's initial rendering?

Upon loading the page or when the user updates it, there seems to be an issue with smooth scrolling to the desired position on the site (lower than needed).

How can this be resolved so that everything functions correctly even after the page has finished rendering?

"use client";

import React 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={-130}
      duration={650}
      className="flex items-center gap-x-2 px-8 py-3"
    >
      {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;

There are two scenarios in which the scrolling bug does not occur:

If the user manually scrolls through the site or uses link navigation for a second time (the first attempt did not scroll correctly), then the navigation operates as intended.
If the link lacks smooth behavior, everything works properly upon initial page rendering. However, smooth scrolling is preferred and alternatives have not been found.

This abnormal behavior is likely related to a smooth scrolling bug. Confirming full page load before attempting to scroll did not provide a solution.

css reactjs typescript next.js react-scroll

Answer 1

Answer №1

"implement customer module";

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

interface CustomButtonProps {
  goToSection: string;
  content: React.ReactNode;
}

const CustomButton: React.FC<CustomButtonProps> = ({
  goToSection,
  content,
}) => {
  // State to keep track of page loading status
  const [isPageLoaded, setPageLoaded] = useState(false);

  useEffect(() => {
    // Function to update state when the page fully loads
    const handleCompleteLoad = () => {
      setPageLoaded(true);
    };

    // Check if the page has finished loading
    if (document.readyState === "complete") {
      setPageLoaded(true); // Set true immediately if page is already loaded
    } else {
      // If page not yet loaded, add event listener to trigger after load
      window.addEventListener("load", handleCompleteLoad);
    }

    // Event listener cleanup when component unmounts
    return () => {
      window.removeEventListener("load", handleCompleteLoad);
    };
  }, []); // Run once on component mount

  return (
    <Link
      smooth={true}
      spy={true}
      isDynamic={true}
      to={goToSection}
      offset={-130}
      duration={650}
      className="flex items-center gap-x-2 px-8 py-3"
      isDisabled={!isPageLoaded} // Disable smooth scrolling until page fully loads
    >
      {content}
      <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 CustomButton;

Answer 2

"implement customer module";

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

interface CustomButtonProps {
  goToSection: string;
  content: React.ReactNode;
}

const CustomButton: React.FC<CustomButtonProps> = ({
  goToSection,
  content,
}) => {
  // State to keep track of page loading status
  const [isPageLoaded, setPageLoaded] = useState(false);

  useEffect(() => {
    // Function to update state when the page fully loads
    const handleCompleteLoad = () => {
      setPageLoaded(true);
    };

    // Check if the page has finished loading
    if (document.readyState === "complete") {
      setPageLoaded(true); // Set true immediately if page is already loaded
    } else {
      // If page not yet loaded, add event listener to trigger after load
      window.addEventListener("load", handleCompleteLoad);
    }

    // Event listener cleanup when component unmounts
    return () => {
      window.removeEventListener("load", handleCompleteLoad);
    };
  }, []); // Run once on component mount

  return (
    <Link
      smooth={true}
      spy={true}
      isDynamic={true}
      to={goToSection}
      offset={-130}
      duration={650}
      className="flex items-center gap-x-2 px-8 py-3"
      isDisabled={!isPageLoaded} // Disable smooth scrolling until page fully loads
    >
      {content}
      <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 CustomButton;

What is the solution for correcting a glitch in smooth scrolling behavior that occurs following the page's initial rendering?

Answer №1

Similar questions

Creating a dynamic parameter name within the state: A step-by-step guide

Bug in Transformation of Menu Icon in CSS

Problem with using Jquery DIY slider for multiple purposes

What is the reason behind the "import statement error" that occurs during yup validation?

A guide to loading CSS and JavaScript files asynchronously

Applying CSS text-shadow to an input field can cause the shadow to be truncated

What is the best way to vertically and horizontally center an AngularJS Material card (md-card)? (For Angular 1.x)

Can you demonstrate how to implement a useState hook as a prop in a component using TypeScript and React?

Styling with CSS3: positioning floating divs on top of a non-floated div

Adjust the font size based on the width of the parent element

Material UI autocomplete with multiple lines of options

Customizing the appearance of map items in a React JS application

When I scroll down, the <div> below the <header> disappears, but only the header should be invisible. Can anyone explain why this is happening?

Creating square images in CSS without specifying their dimensions can easily be done by centering

What is the best way to adjust the height and width of a Modal in a react-bootstrap

Tips for making a reusable function that utilizes alternating if statements

How can we ensure that inputs in Asp.Net MVC 5 with Bootstrap fit the screen width?

What steps are involved in implementing an ordering system on a restaurant's website using React?

Arrange five columns in a bootstrap layout with the first column aligned to the left, the last column aligned to the right, and the remaining columns spaced

Adjust background color as you scroll