Nuxt•2y ago

Scroll to top when new page loads

How do I make nuxt scroll to top every time new page is visited? Right now I tried to make my own plugin but it doesn't work for some reason... (It doesn't even console log) scroll.js

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:finished', () => {
    console.log("Scrolling to top");
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  })
});

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:finished', () => {
    console.log("Scrolling to top");
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  })
});

28 Replies

Fabian B.•2y ago

Hi, are you trying to archive a scroll top everytime a user hits refresh? Or when clicking between routes with <NuxtLink>

qb1tOP•2y ago

When clicking between routes. for example your scroll down in index and click on view more products that puts you on /products but like in the middle of the page

Fabian B.•2y ago

Nuxt 3 does that automatically, you don't have to add a plugin or so 🙂

qb1tOP•2y ago

Is it disabled in dev?

Fabian B.•2y ago

Nope, works fine for my project. Which nuxt version do you use? And do you use <NuxtLink /> for all your links?

qb1tOP•2y ago

<NuxtLink/> Nuxt 3 And it doesn't work for me Even in build

Fabian B.•2y ago

Interesting. Can you share a bit of the code? Like where you implemented the link And maybe a screen recording Works for all my nuxt 3 projects

qb1tOP•2y ago

(dev version a lot of testing code)

<template>
  <div class="showcase-main">

    <div class="showcase-cards">
      <img src="/icons/arrow-left.svg" class="showcase-arrow-left" @click="slide('left')">
      <PropertyCard v-for="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"/>
      <img src="/icons/arrow-right.svg" class="showcase-arrow-right" @click="slide('right')">
    </div>
    <NuxtLink to="/properties" class="btn-primary">See All Properites</NuxtLink>
  </div>
</template>

<template>
  <div class="showcase-main">

    <div class="showcase-cards">
      <img src="/icons/arrow-left.svg" class="showcase-arrow-left" @click="slide('left')">
      <PropertyCard v-for="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"/>
      <img src="/icons/arrow-right.svg" class="showcase-arrow-right" @click="slide('right')">
    </div>
    <NuxtLink to="/properties" class="btn-primary">See All Properites</NuxtLink>
  </div>
</template>

this is the page if you want to have a look your self this code is a component if you scroll down a bit But what surprises me is that the hook is not even called like this is in the documentation so it should work regardless right?

Fabian B.•2y ago

Yeah that is strange. I can imagine that something is blocking this from happening. Can you show your nuxt.config.ts? And do you have any vue router config in your app?

qb1tOP•2y ago

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: false,
  css: ["@/assets/styles.css", "@/assets/scrollbar.css"],
  app: {
    head: {
      title: "Lipa Tree Properties",
      htmlAttrs: {
        lang: 'en'
      },
      link: [
       {rel: "icon", href: "/assets/icon.png"}
      ]
    }
  },
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: false,
  css: ["@/assets/styles.css", "@/assets/scrollbar.css"],
  app: {
    head: {
      title: "Lipa Tree Properties",
      htmlAttrs: {
        lang: 'en'
      },
      link: [
       {rel: "icon", href: "/assets/icon.png"}
      ]
    }
  },
})

nope

Fabian B.•2y ago

looks fine can you show your package.json maybe the whole repo at this point would be easier if thats okay for you haha

qb1tOP•2y ago

Sorry I cannot do that even sharing the link and pieces of code are bit on the edge 😅

Fabian B.•2y ago

Understandable

qb1tOP•2y ago

but in package.json nothing strange just scripts and devDependencies nuxt "^3.1.0"

Fabian B.•2y ago

Can you try to delete the whole .nuxt and .output and node_modules and package-lock.json and npm i nuxt@latest Have to go for now

Unknown User•2y ago

Message Not Public

qb1tOP•2y ago

how?

Fabian B.•2y ago

@Sr. Full Stack Dev normally not needed since this is something working in a regular nuxt project. So if @qb1t would create a brand new nuxt project right now, it would work. Therefore trying to find out what happens in your project that prevents this.

qb1tOP•2y ago

I've created this project like 4 days ago so don't know what went wrong

Fabian B.•2y ago

Yeah it’s pretty strange. Maybe Try to create an new one, add some long texts into two pages and link them to check whether it’s working in. And try to add # scroll-behaviour: smooth; in your html {} css styles.

Fabian B.•2y ago

Check out http://wordpress-madebyfabian.vercel.app my current nuxt project it’s working perfectly fine for me

Fabian Beer

Home | Nuxt Playground

My Nuxt v3 website.

Fabian B.•2y ago

If you want to I can give you access to the GitHub repo to check my code

Unknown User•2y ago

Message Not Public

Fabian B.•2y ago

I have posted a bunch of stuff here now guys, please try that out @Wesley

Unknown User•2y ago

Message Not Public

qb1tOP•2y ago

I tagged this post as ["solved", "answered", "bug"] because the last solution worked for me, so solved and answered but the thing should have worked automatically so also bug

🇨🇭 Marko Bolliger <cannap>•2y ago

still weired but when you have a long site and you go to a page the new should start on top but when you go back it should use the old state for the page you go back?

Gaming

Programming

Scroll to top when new page loads