how can I do smooth scrolling with Link

[fierce hare]

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

[woven rune]

@fierce hare can you help me with that? Its a project with tailwind by the way 😉

[fierce hare]

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

Sorry @woven rune, 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?

---

Of course! Since you're working on a Next.js project with Tailwind CSS, I can provide you with some guidance based on the information extracts I have.

To set up Tailwind CSS in your Next.js project, follow these steps:

1. Install Tailwind CSS and its dependencies:

npx create-next-app --example with-tailwindcss your-project-name
cd your-project-name

This command will create a new Next.js application pre-configured with Tailwind CSS for styling.

2. If you want to use next/font with Tailwind CSS, you can follow this example:

// pages/_app.js
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

And add the CSS variable to your Tailwind CSS config (https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss):

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)', ...fontFamily.sans],
      },
    },
  },
  plugins: [],
}

You can now use the font-sans utility class to apply the font to your elements.

For more examples and information, you can refer to the following sources:

• Tailwind CSS Example (https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss)
• Next.js and Tailwind CSS (https://beta.nextjs.org/docs/styling/tailwind-css)

I hope this helps you with your Next.js project using Tailwind CSS! If you have any specific questions, feel free to ask.

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

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

[woven rune]

I dont want to use fonts, but set scrolling behavior to smooth...

@fierce hare

[fierce hare]

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

Sorry @woven rune, 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?

[woven rune]

@fierce hare What about now?

[fierce hare]

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

---

I'm glad you found the previous answer helpful! If you have any more questions or need further assistance with your Next.js and Tailwind CSS project, please feel free to ask. I'm here to help!

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

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

[woven rune]

yes I want to set scrolling behaviour of next/link components to smooth! @fierce hare

yes I want to set scrolling behaviour of next/link components to smooth! @woven rune

yes I want to set scrolling behaviour of next/link components to smooth! <@&1089670008898080870>

yes I want to set scrolling behaviour of next/link components to smooth! @fierce hare

[fierce hare]

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

---

To set the scrolling behavior of next/link components to smooth, you can use the scrollIntoView method with the behavior: 'smooth' option. You can achieve this by using the onClick event in your next/link component.

Here's an example of how to implement smooth scrolling with next/link:

import Link from 'next/link'

function smoothScroll(event) {
  event.preventDefault()
  const targetId = event.currentTarget.getAttribute('href')
  const targetElement = document.querySelector(targetId)
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'smooth' })
  }
}

function Home() {
  return (
    <ul>
      <li>
        <Link href="#section1" passHref>
          <a onClick={smoothScroll}>Section 1</a>
        </Link>
      </li>
      <li>
        <Link href="#section2" passHref>
          <a onClick={smoothScroll}>Section 2</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

In this example, we define a smoothScroll function that prevents the default behavior of the link, gets the target element using the href attribute, and then scrolls to that element smoothly using scrollIntoView. We then pass this function to the onClick event of the a tag inside the next/link component.

Keep in mind that this approach is for smooth scrolling within a single page. If you want to scroll smoothly between different pages, you might need to implement a custom solution using the next/router and useEffect hook.

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