Smooth Scroll to an Element in React

helping your visitors smoothly scroll to an element is an easy way to enhance the experience of your app so we'll see how we can easily do this with browser apis like scroll into view scroll and scroll by all within a react app in my app I have a few different locations for where I want to set up jump points starting with jump to games this technically already Works where if I click it we can see that I jump right down to games now this worked because I use a fragment for the atref which is referencing this ID of games for the game section but this interaction is a bit of when someone clicks this I want them to smoothly scroll down to the game section so an easy way in order to do this is to use the scroll into view method so ultimately what we want to do is we want to fire this scroll into view method but this method's only going to be available on element instances now we can certainly query for our element like we see in this example but since we have pretty static access to the element that we want to reference we can use the ref's API from react so I'm going to import use ref from react and then inside of my app I'm going to create a new ref called games ref and set that equal to use ref now down on my game section I'm going to specify a new ref prop and I'm going to set it to games ref now as we can see Ty script is yelling at us so we want to make sure that we specify this is going to be an HTML div elements a div not a dive and we can also make sure that it's otherwise going to be null and set that default value but now that we have this ref set on our jump to games link I'm going to actually turn this into a proper button and I'm going to get rid of that hre and instead I'm going to add an onclick Handler we inside I'm going to reference that games ref and I'm going to say do current where the instance of that element is going to be stored on that current property but then I'm going to add some optional chaining to make sure it exists before I fire my method but then I'm going to specify scroll into view so now back inside the app once I click jump to games we can see it does the same thing but now I'm going to specify an options object where I'm going to say I want the behavior to be smooth and this time when I click jump to games we can see how smooth it was going down to that section now if for what whatever reason you don't have access to add a ref or maybe these elements are being dynamically created you can also query for this element since my game section also has an ID of games I can say constant element is equal to document get element by ID we all specify games and alternatively if you want you can also use Query selector where you just specify the hash along with it but once I have that element I can simly just replace this ref and use that element instead which will work just the same but using refs is kind of react away so it's probably preferable to use that as an option so that jump point is working perfectly let's try to replicate this elsewhere where for each and every one of these posters if you click one of these it will similarly jump down to that particular game now for this one similar to the situation we were talking about it probably doesn't make sense to add a ref to every single one of these games especially because likely in a real application this would be probably getting dynamically added so what we can actually do is we can add the click Handler to our unordered list element where we'll say on click and inside we'll handle it kind of similarly to what we did before but this time we do need to dynamically query for that element where we'll use document get element by ID we inside each and every one of these list items we do have that ID already available as the HF so while we could technically add our ID which makes it a little bit easier to get we can just make use of this HF that we're going to hijack here now to get that element we want to inspect the event of this onclick Handler which we can type out as a react. synthetic event which is actually a capital S but here we're going to set a con of Target which is equal to event.target and we're going to specify it as an HTML anchor element now one thing to quickly point out here is in this situation if you have this anchor tag in this image and you click this image this image would be the actual Target but I added this pointer events nun class here so that it bubbles up to the Anchor tag instead now if I had some text in here instead of the image it would by defa Bubble Up and make the target this anchor tag but because I want to have the images in there to make it look nicer we got to make sure that we specify the pointer events none but now that I have my target I want to get the ID of that element so I'm going to say constant ID is equal to Target get attribute which is going to be that href and because I'm using get element by ID I need to make sure I strip this hashtag from it so I'm just going to Simply add a replace with that hashtag to an empty string now we want to make sure typescript is happy so just in case that doesn't exist We'll add optional chaining but now I can take my ID and I can pass it into get El by ID and I'm going to make sure I'm also going to this as a string just again to make typescript happy as I'm passing that through but finally I have my element and we can do the exact same thing we did before so I'm going to just simply copy this scroll into view code and I'm going to replace that games ref. current and now when I want to look at Dead Space uhoh it just jumped down and it didn't scroll smoothly since we're using anchor tags instead of buttons we have one thing we need to do and that's run event prevent default but now when I try that again we can see how smooth that Scrolls okay so next up once I get to the very bottom of the page I want to jump back up to the top of the page now again looking at pure HTML ways to do this we can technically do this by passing in an empty fragment if I click jump to top we can see that it does work and this works according to spec because if we look inside we can see that if the fragment is an empty string to return the Special Value top of the document but similar to before we want to make sure that we provide a smooth scroll for this we can use the scroll or the scroll two method but starting with scroll the way that this works is we're going to pass in some XY coordinates so back to my code I converted it to a button to start where I'm going to add my onclick event handler where inside I'm going to add window do scroll I'm going to specify 0 0 for x and y0 and when we click jump to top we can see that it works but it works just the same as that empty fragment where as you'd expect the first thing we want to do is add our options object where we want to specify a top value of zero where we don't even need to specify that x value anymore but then we can add that behavior prop and we can say we want it to be smooth so now when we click jump to top it works buttery smooth now as I mentioned before we can also instead use the scroll two method now the funny thing is with Scroll 2 is it works exactly the same as scroll so without changing the code except the method name it works just the same and this is another interesting one to pull up it from the spec where we can see when scroll to method is invoked the user agent must act as if the scroll method was invoked with the same arguments so for all intents and purposes scroll two is just simply scroll so we might as well use the authoritative one but our jump to top is work really well now and we only have one thing left to do and that's add a next page jump now let me move myself out of the way for a second but we can see that we have this next page button and what do I mean necessarily by next page where if I hit the space bar we can see that it goes down Page by Page and maybe not a lot of people specifically use that space bar but what if they have this option so once you click it it smoothly Scrolls through the different pages of the site now technically we can just use the scroll method again and do a little extra math but what if instead we use the scroll by Method this is going to work somewhat similarly to scroll but instead of the pixel values being the XY coordinates relative to the very top of the page they're going to be relative to our vport and it's going to be the amount we want to scroll from that position so if I can try to visualize this a little bit if I have this poster art at a specific height and I want to scroll by that amount it would only scroll that amount when I pass in that value as opposed to if I pass that value into scroll it would scroll from the top so it would need to be the Top Value Plus that in order to get to the bottom of Allen weight so on our next page button I'm going to add my onclick Handler and inside I'm going to add window. scroll by here we can similarly use the coordinates if we want like before but instead we're going to just go ahead and opt for our options object where I want to pass in a Top Value and what this is going to be is the height of the viewport now what I mean by the viewport is the height from the top of this chrome here or the bottom of the Chrome rather down to the bottom of what I'm able to actually see or view we can dynamically get this value by specifying window. inner height where we can see that if I now shrink the browser and run that again it's now 339 but we can simply dynamically pass that into to our top value of inner height and we want to make sure we add our behavior of smooth but now back in the browser we can hit this next page button we can see that it was smoothly sailing through each and every page while these were some simpler use cases we could start to think about how these can get more advanced to provide more interactivity inside of our apps next up let's see how we can easily build beautiful uis with Tailwind using Daisy UI components

Channel: Colby Fayock

Views: 5,265

Keywords: scroll to element react, scroll to element reactjs, scroll to top react, scroll to bottom react, scroll to section react, scroll to top button javascript, scroll to top react js, scroll to top button, scroll to element javascript, react scroll to component, react scroll, react scroll to section, react scroll to top, react scroll to bottom, smooth scroll react, smooth scroll javascript

Id: MjHlltcA-nA

Length: 8min 37sec (517 seconds)

Published: Thu Jan 04 2024