When thinking of react I think of a complex project, going back to
the beginning of my history with react, its true I’m not exactly
equipped to be a master of it, but I took this and the first bug as
practice towards small react projects, yes I’m not an expert but I
want to learn and all of my projects haven’t exactly been complex,
and the projects i been trying to contribute they are in one way or
another interesting to me in some way, this was for reasons you
wouldn’t expect This project was dealing with something that is a bit
of a leftover from my last bug, I came to this bug when I was looking
for solutions of a bug I had during my bug number 3 of Hacktober, now
what it was you say? The last project had a bug where scroll decided
to jump downwards, now despite having a fairly acceptable fix,
without modifying the code, I wasn’t happy about it. So I went
looking for similar bugs trying to find some sort similar issue
because I was curious if I was doing something wrong
this fix deals with a new feature of current browsers, Scroll restoration:
What is it, in the past browsers didn’t keep the state of a scroll bar and now suddenly same as history they keep the state of the page.
Now in some places this is an unwelcome change applications where we need to keep the state or change state to be different every load, this is what this bug deals with, now an example of how this would look like I’m gonna refer to the tutorial that showed me how our scroll needs would be needed
in picture 1 we notice that we are on a page that has 2 different scrolls
Lets scroll a little in the page
and click in another section
now you can observe that this react site reloads and moves the scroll
back to the top, despite being a lazy load/ navigate away on a frame
that should not change scroll, as such we need to manually change the
scroll back to the top.
Lets look at our solution:
because the tutorial I did does not give you a full picture, or proper instructions unless you are familiar with the language.
In react to create a scroll to top you need a function to do solve this issues in this program we are using the version 16.8 we can use this code
However if running below use the following
now this code needs to be separate from the file that you need to import in your main function (app) you must add it on your imports,
this is my instruction
I’m keeping it in common as it is a common function of the system(same as header and footer if you want the single instruction you can have it here
now that you have this sorted out, you need to add it right after your router functionality.
And you are done!
Now this only solves some of the issues I had with my tutorial I admit I’m not a master of react and other js frameworks which has been my main focus on this projects.
While admittedly this is a fairly simple fix, I hope this helps someone not have the issues I had trying to solve the problem, as clearness is the enemy of many tutorials.
Maybe that’s because I seem to be loving towards business analysis and documentation lately I see a lot of potential to technologies, but nothing that I can consider efficient,(seen before in other frameworks), Documentation is key, and I see that technology needs to get better and better, but our documentation sometimes assumes a lot from the end user, its odd perhaps and a contradiction, this is obviously not the case for everyone or every project but is something I have observed in other projects I worked on
I plan to stay with this project as well if I can, the topic is interesting(fantasy sports) and it works in a language I fan fascinating and need experience at.
Who knows, this could teach me even more than this small fix that I came to after I was trying to redeem myself for not being able to fix a similar issue in a completely different framework.
To see this project in action perhaps visit the project we have this running
to visit the tutorial that helped me suggested by developer himself
Until next time!