Scroll Restoration

πŸ‘¨β€πŸ’Ό Now that we've got JavaScript running on the page, our customers are noticing that their scroll position is not where they expect it to be. For example, if you're on the notes list page and you're scrolled down a bit, then clicking the "Edit" link leaves you where you are when it should scroll the user to the top of the page so they can edit the note. This is because the browser is no longer responsible for navigations, so the role of scroll restoration lies in our hands!
Luckily, Remix has a πŸ“œ ScrollRestoration component we can use to fix this. Please use that component!
Tip: To test this out, make your browser window short so that your page is scrolling, then scroll to the bottom and click the Edit button.
Once you've done that, come back here, I've got another task for you.
You got it done? Ok, great! Now I actually need you to "undo" the scroll restoration for a particular navigation. If you're scrolled down a bit on the list of notes, then change notes, it's jarring to have the page scroll to the top. So for those links, we don't actually want to scroll the user to the top. Oh what to do? 😱
Luckily, Remix allows you to control this scroll restoration behavior on a per-link basis using the πŸ“œ preventScrollReset prop (through React Router):
<Link preventScrollReset to="candy">
	Candy
</Link>
Tip: To test this out, make your browser window short so that your page is scrolling, then scroll to the bottom and click different notes.
Go ahead and add the preventScrollReset prop to those links.

Please set the playground first

Loading "Scroll Restoration"
Loading "Scroll Restoration"
Login to get access to the exclusive discord channel.
  • general
    Modals / Dialogs
    Lucas Wargha πŸš€ 🌌:
    It seems like modals and dialogs are becoming a hot topic on my team lately. I haven’t found a solid...
    3 Β· 4 days ago
  • πŸ”­foundations
    Prefetching not working?
    Justin Toman πŸ†:
    I'm on 05. Scripting / 04. Prefetching I have the exact solution running (0 diff), I've restarted t...
    • βœ…1
    2 Β· 2 months ago
  • general
    epic stack website initial load at home page is unstyled (sometimes)
    osmancakir πŸš€ 🌌:
    Sometimes (especially when it is loaded first time on a new browser etc.) I see this unstyled versio...
    • βœ…1
    10 Β· 3 months ago
  • general
    Welcome to EpicWeb.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    This is the first post of many hopefully!
    • 18
    86 Β· 2 years ago
  • general
    Resource / Api endpoints on epic stack / RR7
    Lucas Wargha πŸš€ 🌌:
    Hi everyone! Quick question for those using the Epic Stack: How are you handling resource routes ...
    • βœ…1
    2 Β· 2 months ago
  • general
    Epic stack using tanstack form
    Lucas Wargha πŸš€ 🌌:
    https://github.com/epicweb-dev/epic-stack/compare/epicweb-dev:main...wargha:feature/tanstack-form-ex...
    • βœ…1
    3 Β· 2 months ago
  • general
    Init command outdated on the EpicWeb website
    Virgile πŸ† 🌌:
    Hi everyone. I've initialized a new epic-stack project yesterday. Following instructions from http...
    • βœ…1
    3 Β· 2 months ago
  • general
    Mark as complete, resets the first time you click it.
    Daniel V.C πŸš€ 🌌:
    Not sure if anyone else has had this issue, as i've not seen anyone else talk about it, but I find ...
    • βœ…1
    8 Β· 3 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    double underscore?
    trendaaang 🌌:
    What with the `__note-editor.tsx`? I don't see that in the Remix docs and I don't remember Kent talk...
    • βœ…1
    2 Β· a year ago
  • general
    Keeping Epic Stack Projects Free on Fly – Any Tips?
    Lucas Wargha πŸš€ 🌌:
    I’ve been experimenting with the Epic Stack and deploying some dummy projects on Fly. I noticed that...
    • βœ…1
    0 Β· 3 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    Creating Notes
    Scott 🌌 πŸ†:
    Does anybody know in what workshop we create notes? I would like to see the routing structure. So fa...
    • βœ…1
    2 Β· 5 months ago
  • πŸ”­foundations
    πŸ’Ύdata
    general
    πŸ“forms
    πŸ”auth
    Thank you for the inspiration
    Binalfew πŸš€ 🌌:
    <@105755735731781632> I wanted to thank you for the incredible knowledge I gained from your Epic Web...
    • ❀️1
    1 Β· 5 months ago
  • πŸ”­foundations
    git push returns 400
    mohdelle 🌌:
    when i try to start a fresh epic stack project and push to remote it's going to an error. anyone els...
    • βœ…1
    3 Β· 7 months ago
  • general
    npm install everytime I setup a new playground
    Duki 🌌:
    Is it normal that I have to run `npm install` in my playground directory, everytime I setup the play...
    • βœ…1
    2 Β· 8 months ago
  • πŸ”­foundations
    Progessive Enhancement - React .map
    Scott 🌌 πŸ†:
    I'm reviewing Foundations --> Scripting --> Scripts. I'm wondering how the `.map` works (iterating...
    • βœ…1
    1 Β· 8 months ago
  • πŸ”­foundations
    Parent Data - SEO - Typescript concept help
    remich 🌌:
    I'm relatively new to TS, and I can see the value that Kent is talking about with the second argumen...
    • βœ…1
    1 Β· 10 months ago
  • πŸ’Ύdata
    πŸ“forms
    πŸ”­foundations
    Reviewing foundations, Mutations, Actions
    silvanet πŸš€ 🌌:
    Forgive me for this. I went over the file size limit. I don't want to sign up for being able to exce...
    • βœ…1
    2 Β· a year ago
  • general
    Migration to Vite: Server-only module referenced by client
    Fabian 🌌:
    Hi, I'm working on migrating to Vite following the remix docs (https://remix.run/docs/en/main/guides...
    • βœ…1
    1 Β· 10 months ago
  • πŸ”­foundations
    Styling 05 workshop error: Expected component `CodeFile` to be defined
    jocosage 🌌:
    Is this error intended behaviour, it doesn't look so as in the git repo there seems to be instructio...
    • βœ…1
    3 Β· 9 months ago
  • πŸ”­foundations
    Foundations Review
    Baghira 🌌:
    I finished the foundations workshop. I liked the SEO part and error handling part. Remix built-in to...
    • βœ…2
    1 Β· 9 months ago
  • general
    Remix Vite Plugin
    Binalfew πŸš€ 🌌:
    <@105755735731781632> Now that remix officially supports vite (though not stable) what does it mean...
    • βœ…1
    3 Β· 2 years ago
  • general
    πŸ”­foundations
    Solutions video on localhost:5639 ?
    quang πŸš€ 🌌:
    Hi, so I'm having a hard time navigating (hopefully will be better with time) The nav on epicweb.de...
    • βœ…1
    9 Β· 2 years ago
  • πŸ”­foundations
    Progressive Enhancement & Client Side Scripting
    Chwizdo 🌌:
    I'm currently just starting at foundations | scripting part, and until now, I've heard KCD mentioned...
    • βœ…1
    4 Β· 2 years ago
  • πŸ”­foundations
    Unable to push my changes to Github
    Sachin Purohit 🌌:
    When trying to push changes, I am getting the below error- remote: fatal: did not receive expecte...
    • βœ…1
    3 Β· a year ago
  • general
    Epicshop is now social and mobile friendly!
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    I'm excited to announce that now the Epic Web workshops are mobile friendly! https://foundations.ep...
    • πŸŽ‰2
    0 Β· a year ago
  • πŸ”­foundations
    How to fetch data on client (e.g. Combobox)
    QzCurious 🌌 πŸš€:
    After learning from epic web, I'm really into SSR data fetching pattern. I'm now doing SSR all of m...
    • βœ…1
    2 Β· a year ago
  • πŸ”­foundations
    @remix-run/react vs @remix-run/node
    mustak πŸš€ 🌌:
    Module: Search Engine Optimization Exercise: Meta Overrides There are 2 different imports for type ...
    • βœ…1
    2 Β· a year ago
  • πŸ’Ύdata
    πŸ“forms
    πŸ”­foundations
    How can I do this?
    silvanet πŸš€ 🌌:
    Viewing the Intro (from the Workshop) for Mutations, the course has an embedded video where Kent exp...
    • βœ…1
    3 Β· a year ago
  • πŸ”­foundations
    remix flat routes
    mustak πŸš€ 🌌:
    Can someone give me a quick explanation of the following: ```markdown ## underscores with files _fi...
    • βœ…1
    2 Β· a year ago
  • πŸ”­foundations
    How to launch VS Code editor from File links in app using wsl2?
    mustak πŸš€ 🌌:
    I've tried setting environment variables in .env: ```js KCDSHOP_EDITOR=code ``` and ```js KCDSHOP_ED...
    • βœ…1
    5 Β· a year ago
  • πŸ”­foundations
    Meta function not being called
    juliano.brasil 🌌:
    Hi. I'm checking the assets on the foundations module, and something is somehow not working for me (...
    • βœ…1
    7 Β· a year ago