Issues with scrolling to hash

So I'm trying to have scroll on the same page to a hash / id similar to this:

<template>
  <div>
    <Nabar />
    <SectionOne />
    <div id="section-two">
      <p class="text-2xl">Test</p>
    </div>
  </div>
</template>

<template>
  <div>
    <Nabar />
    <SectionOne />
    <div id="section-two">
      <p class="text-2xl">Test</p>
    </div>
  </div>
</template>

In navbar I would have:

      <div
        class="hidden flex-row items-center justify-center gap-[40px] transition-colors duration-300 md:flex"
      >
        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="{ path: link.path, hash: link.hash }"
        >
          {{ link.name }}
        </NuxtLink>
      </div>

      <div
        class="hidden flex-row items-center justify-center gap-[40px] transition-colors duration-300 md:flex"
      >
        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="{ path: link.path, hash: link.hash }"
        >
          {{ link.name }}
        </NuxtLink>
      </div>

I have also tried:

        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="link.path + link.hash"
        >
          {{ link.name }}
        </NuxtLink>

        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="link.path + link.hash"
        >
          {{ link.name }}
        </NuxtLink>

And many other ways..
The actual link is there, but when clicked. it does not scroll at all nor change the view to the div with the id set. However, when I refresh it does scroll there and smoothly (I have already set router options to scroll smoothly

If I do it with <a> the view is changed, but no smooth scroll and I'd also prefer to use NuxtLink.
What could be the issue?

Issues with scrolling to hash

So I'm trying to have scroll on the same page to a hash / id similar to this:

<template>
  <div>
    <Nabar />
    <SectionOne />
    <div id="section-two">
      <p class="text-2xl">Test</p>
    </div>
  </div>
</template>

<template>
  <div>
    <Nabar />
    <SectionOne />
    <div id="section-two">
      <p class="text-2xl">Test</p>
    </div>
  </div>
</template>

In navbar I would have:

      <div
        class="hidden flex-row items-center justify-center gap-[40px] transition-colors duration-300 md:flex"
      >
        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="{ path: link.path, hash: link.hash }"
        >
          {{ link.name }}
        </NuxtLink>
      </div>

      <div
        class="hidden flex-row items-center justify-center gap-[40px] transition-colors duration-300 md:flex"
      >
        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="{ path: link.path, hash: link.hash }"
        >
          {{ link.name }}
        </NuxtLink>
      </div>

I have also tried:

        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="link.path + link.hash"
        >
          {{ link.name }}
        </NuxtLink>

        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="link.path + link.hash"
        >
          {{ link.name }}
        </NuxtLink>

Issues with scrolling to hash

Similar Threads

Issues with scrolling to hash

Similar Threads

Similar Threads

Similar Threads