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.
Login to get access to the exclusive discord channel.
  • 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 ยท 20 days 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 ยท a month ago
  • general
    Remix Vite Plugin
    Binalfew ๐Ÿš€ ๐ŸŒŒ:
    <@105755735731781632> Now that remix officially supports vite (though not stable) what does it mean...
    • โœ…1
    3 ยท a year ago
  • general
    Welcome to EpicWeb.dev! Say Hello ๐Ÿ‘‹
    Kent C. Dodds โ—† ๐Ÿš€๐Ÿ†๐ŸŒŒ:
    This is the first post of many hopefully!
    • 17
    78 ยท a year 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 ยท 10 months 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 ยท a year 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 ยท 2 months 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 ยท 3 months 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 ยท 3 months 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 ยท 3 months 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 ยท 4 months ago
  • ๐Ÿ”ญfoundations
    remix flat routes
    mustak ๐Ÿš€ ๐ŸŒŒ:
    Can someone give me a quick explanation of the following: ```markdown ## underscores with files _fi...
    • โœ…1
    2 ยท 4 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...
    2 ยท 4 months 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 ยท 4 months 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 ยท 4 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 ยท 4 months ago
  • ๐Ÿ’พdata
    ๐Ÿ”ญfoundations
    Handle Missing Data - Error when i'm using invariantResponse
    Luan.ibarra ๐ŸŒŒ:
    Hello, I'm trying to use the invariantResponse utility from // "#app/utils/misc.ts" to do this in a...
    • โœ…2
    2 ยท 5 months ago
  • ๐Ÿ”ญfoundations
    ๐Ÿ’พdata
    general
    ๐Ÿ“forms
    ๐Ÿ”auth
    Native Logging
    trendaaang ๐ŸŒŒ:
    I was thinking that it could be useful to log every CRUD operation to help track down errors. Is tha...
    • โœ…1
    6 ยท 5 months ago
  • general
    The video play is pretty laggy currently
    QzCurious ๐ŸŒŒ:
    I thought I should tag you for this <@105755735731781632>. Please take a look if something wrong.
    • โœ…2
    9 ยท 6 months ago
  • general
    New Workshop Scheduled
    Kent C. Dodds โ—† ๐Ÿš€๐Ÿ†๐ŸŒŒ:
    Hey Epic Web devs! I wanted to let you know before everyone else on here: https://www.epicweb.dev/ev...
    • 2
    0 ยท 6 months ago
  • general
    Deploying an exercise
    Khoi ๐Ÿš€ ๐ŸŒŒ:
    Dear <@105755735731781632> , First of all, I really appreciate your effort in building this EPIC cou...
    • โœ…1
    1 ยท 6 months ago
  • general
    "Start App" throws error: Error: Cannot add empty string to PrefixLookupTrie
    Martin ๐ŸŒŒ:
    โœ— npm run start > start > kcdshop start [playground:4000] [playground:4000] > dev [playground:4000...
    • โœ…1
    7 ยท 10 months ago
  • general
    ๐Ÿ“forms
    Can't start the playground
    trendaaang ๐ŸŒŒ:
    Been a minute since I last worked on this course. Just tried running the app and was notified that t...
    • โœ…1
    3 ยท 7 months ago
  • general
    Question about the Workshop App tabs
    sjollivier ๐ŸŒŒ:
    Just started the course. I might have missed this in the Getting Started video, but how should I be ...
    • โœ…1
    1 ยท 7 months ago
  • ๐Ÿ”ญfoundations
    I'm in Routing
    silvanet ๐Ÿš€ ๐ŸŒŒ:
    I tried to run npx remix routes and got this: ``` Error: Could not determine server runtime. Please ...
    • โœ…1
    5 ยท 8 months ago