Nuxt•2mo ago

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?

2 Replies

brianb•2mo ago

Also doing this:

    <NuxtLink :to="{ path: '/', hash: '#test' }" class="text-xl">
      test
    </NuxtLink>
    <a href="#test" class="text-xl">
      test 2
    </a>

    <NuxtLink :to="{ path: '/', hash: '#test' }" class="text-xl">
      test
    </NuxtLink>
    <a href="#test" class="text-xl">
      test 2
    </a>

And only <a> works

Cue•2mo ago

You need to configure the routers scroll behaviour.

Gaming

Programming

Issues with scrolling to hash