[NEXT-658] Nextjs 13 Link not scrolling to anchor element

[vladgardus]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 16.13.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.0.6
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

no github link

To Reproduce

• Add Link with href={{ pathname: /, hash: "home" }}
• add div with id="home"
• clicking on link will not scroll to div

Describe the Bug

Working on a next 13 app using the experimental flag.

Created a header that has 3 next/link elements and the purpose of those 3 links is to set a hash on the URL and scroll to that anchor element.

The issue is that clicking on those links change the URL but does not scroll to the anchor element, but the strange thing is that by manually changing the hash in the URL does in fact trigger that scroll to the anchor element.

Expected Behavior

Links that add hashes to URL should scroll to the anchor element.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-658

[apriltaoyvr]

Can confirm that this is happening on 13.1.1

[myl7]

Can use plain old <a> to temporarily resolve it, in case anyone like me gets stuck by this

[pabx12]

i have the same problem

[magnusriga]

Same issue here. Neither /foo/#bar nor /foo#bar works.

[olavocarvalho]

Im facing the same issue. Workaround: currently using the react-scroll lib to scroll between sections in the page.

[magnusriga]

I solved this by checking, in a component with an id that might be scrolled to, whether it could find an element with the id set in window.location.hash. If so, scroll to it. I created the below hook to make it easier to use.

PS: The first component that uses the hook and finds the element, will handle the scroll. I tried to target the specific current element with a ref callback, but it did not scroll every time (have no idea why, see suggestion below).

Hook that always works:

import { useEffect, useContext } from "react";
import { NavbarContext } from "@context/NavbarContext";

const useSmoothScrollTo = (targetHash = null) => {
  const { navRect } = useContext(NavbarContext);

  useEffect(() => {
    if (typeof window === "undefined") return;
    const hash = targetHash || window.location.hash;

    if (!hash) return;

    const headerOffset = navRect?.height || "70";

    // Only proceed if target is a single hash tag
    const startWithHashRegex = /^#\w+/g;
    if (!startWithHashRegex.test(hash)) return;

    let target = document.querySelectorAll(`${hash}`)[0];

    if (!target) return;

    const elementPosition = target.getBoundingClientRect().top;
    const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

    window.scrollTo({
      top: offsetPosition,
      behavior: "smooth",
    });
  }, [navRect.height, targetHash]);
};

export default useSmoothScrollTo;

Callback ref hook that only scrolls now and then:

import { useContext, useCallback } from "react";
import { NavbarContext } from "@context/NavbarContext";

const useSmoothScrollTo = (hash = null) => {
  const { navRect } = useContext(NavbarContext);

  const ref = useCallback(
    (node) => {
      if (node !== null) {
        // Runs on mount of node

        if (typeof window === "undefined") return;
        const targetHash = hash || window.location.hash;

        if (!targetHash) return;

        // Only proceed if target is a single hash tag
        const startWithHashRegex = /^#\w+/g;
        if (!startWithHashRegex.test(targetHash)) return;

        const targetHashId = targetHash.substring(1);

        const headerOffset = navRect?.height || "70";

        const currentNodeId = node.id;

        if (targetHashId !== currentNodeId) return;

        const elementPosition = node.getBoundingClientRect().top;
        const offsetPosition =
          elementPosition + window.pageYOffset - headerOffset;

        window.scrollTo({
          top: offsetPosition,
          behavior: "smooth",
        });
      } else {
        // Runs on unmount of node
      }
    },
    [navRect.height, hash]
  );

  return ref;
};

export default useSmoothScrollTo;

[grzegorzpokorski]

Another strange behavior which I am noticing in nextjs v13.2 with experimantal /app dir is that when I have a link e.g.: <Link href="#place-on-page">link</Link> on page located on /page path, it always redirect to /#place-on-page instead /page#place-on-page.

[nosovandriy]

Next 13.2.1 the same trouble with the anchor link

[jayantasamaddar]

Facing this same issue in Next 13.2.3

Can use plain old <a> to temporarily resolve it, in case anyone like me gets stuck by this

@myl7 That will come with the window scroll-to-top problem, which has to be resolved on its own.

@magnusriga The issue isn't that we cannot write an useEffect to handle this. The issue is: "Really, that's how we are gonna do things?" so although calculating the offSet and manually scrolling may work, that's not the route we want to take at all. Not optimal.

The earlier docs had a section showing an example with hash links and disabling scroll to top with as seen HERE

<Link href={url} scroll={false}>Click Me</Link>

The current docs don't even mention it.

[grzegorzpokorski]

URL hash (#) handling is in the Routing roadmap (https://beta.nextjs.org/docs/app-directory-roadmap), so we just need to wait for it to arrive.