how to enable smooth scroll behavior or

[pale peak]

how to enable smooth scroll behavior or next/link to element id?
@pine horizon

[pine horizon]

Hi @pale peak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Let me check the knowledge base for you. One moment! :books:

Sorry @pale peak, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

---

Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the Next.js documentation on next/link (https://nextjs.org/docs/api-reference/next/link) and Linking and Navigating (https://beta.nextjs.org/docs/routing/linking-and-navigating) for more information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@pale peak kapa.ai is still learning and improving, please let us how it did by reacting below

[pale peak]

@pine horizon for some reason it does not scoll to an element ID not with Link neither with push... Why?

[pine horizon]

Let me check the knowledge base for you. One moment! :books:

---

Based on the provided extracts, the default behavior of next/link is to scroll to the top of the page. When there is a hash defined, it should scroll to the specific element ID, like a normal <a> tag. To prevent scrolling to the top or hash, you can add scroll={false} to Link. Here's an example:

<Link href="/#hashid" scroll={false}>
  Disables scrolling to the top
</Link>

However, if you're experiencing issues with scrolling to an element ID using next/link or router.push, it might be due to other factors not covered in the provided extracts. I recommend referring to the Next.js documentation on next/link (https://nextjs.org/docs/api-reference/next/link) and Linking and Navigating (https://beta.nextjs.org/docs/routing/linking-and-navigating) for more information and potential solutions.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@pale peak kapa.ai is still learning and improving, please let us how it did by reacting below

[pale peak]

@pine horizon what does onScroll and onScrollCapture do on next/link component?

[pine horizon]

Let me check the knowledge base for you. One moment! :books:

---

I'm sorry, but the provided extracts do not mention onScroll or onScrollCapture props for the next/link component. You can refer to the Next.js documentation on next/link (https://nextjs.org/docs/api-reference/next/link) for more information about the available props and their usage.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@pale peak kapa.ai is still learning and improving, please let us how it did by reacting below

[pale peak]

@pine horizon the solution was just use useRef and scroll element into view!

[pine horizon]

Let me check the knowledge base for you. One moment! :books:

---

I'm glad you found a solution using useRef and scrollIntoView. For those who might be interested in a similar approach, here's a general example of how to use useRef and scrollIntoView with React:

import React, { useRef } from 'react';

function MyComponent() {
  const elementRef = useRef(null);

  const handleClick = () => {
    if (elementRef.current) {
      elementRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <>
      <button onClick={handleClick}>Scroll to element</button>
      {/* ... */}
      <div ref={elementRef}>Target element</div>
    </>
  );
}

export default MyComponent;

In this example, we create a ref using useRef and attach it to the target element. When the button is clicked, the handleClick function is called, which scrolls the target element into view smoothly using scrollIntoView({ behavior: 'smooth' }).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: