Weird Snap to Top after page fully loads and user has already started scrolling down the page

Developing with Prismic
1

Currently by default across my app I get this issue.

  1. Visit a new page on the site
  2. Once the page has loaded most of the content, start scroll down.
  3. Page seems to finish loaded.. and there's an undesired snap back to the top of the page.
  4. User experiences a jank/jerk, looses their place and then needs to start scrolling again.

From initial web searches it seems it could be one of a few issues.
Seems not to be image or font loading as I initially thought.

Then I came across the Nuxt scrollToTop Property which seems to be the culprit.

I changed the code on each of my pages following the documentation.

Attempts to set this in my layout was unsuccessful but adding it to each page in my site worked to address THIS problem and I've currently taken this approach to stop the jank snap back effect.

<template>
  <h1>My child component</h1>
</template>

<script>
  export default {
    scrollToTop: false
  }
</script>

Now however I'm getting a weird second issue..

Page keeps loading a place half way down the page when I click across pages

With scrollToTop: false I'm now getting this effect..

  1. Load site see top of page
  2. Scroll say 3/4 way down.. and click button to say /second-page.
  3. Second Page loads showing (loosely) position 3/4 way down
  4. User confused in a new way now as they can visit pages for the first time in the site and never see the header for that page.
  5. Im happy if the user visits a page and say scrolls 80% down the page, and leaves and comes back to the page and it's still 80% of the way down. That feels justifiably expected. But not just navigating across the site in a weird 3/4 way down page state.

Help! So confused.

How to I load new pages at the top of the page and NOT have the snap back to top occur if the user has already started scrolling.. you know get normal occurrence like native navigation on a static site.

3

Hey @online,

I'm not really sure what could be causing this issue. Are you testing this in development mode? Are you planning to deploy statically? because we really recommend this and if so I would test statically deployed as it might resolve this issue.

Also @Pau suggested checking out the docs on Scroll Behavior: "When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does."

Other than that I'm really not sure. I would suggest reaching out on the Nuxt.js discord to get more expert help on that issue.

Thanks.

6

This issue has been closed due to inactivity. Flag to reopen.

7

[Update] Upgrading the package.json libraries fixes this issue.
Probably related to Nuxt/Prismic/Tailwind.

1 Like