When using client-side routing, we may want to scroll to the top when navigating to a new route, or preserve the scrolling position of history entries just like RealPage Reload does. View Router allows you to achieve these, and even better, allows you to completely customize the scroll behavior on route navigation. Let's tidy up our experiences and add some scroll behavior so that the list of experiences stays at the top of the page, which means we can easily navigate from one experience to the other. This will allow for a better user experience as our users can quickly browse through them without having to scroll all the time.
To do this, we add the scrollBehaviour function to our router which receives the to and from root objects. The third argument, savedPosition, will result in a native-like behaviour when navigating with back forward buttons in the browser. hash. If there is a hash, we scroll to the anchor by returning the selector.
whereas if the returned position is falsy or an empty object we will retain the current scroll position. We can now add the hash in the router link tag in our destination details component. We can give it the ID of experience and we then add the ID to where we want the anchor tag to be or where we want the page to scroll to. We should now add some padding to our experiences class as this will give us more spacing on the page and we can therefore see the scroll behaviour more clearly.
And over in our experience details page We can remove the H1 tag as we don't need this. And let's add some padding to our Experience Details class. Now let's check it out and see it in action. If we scroll on the page and click on an experience, we can see that the scroll behaviour does work as it remembers where we were on the page.
However, if we scroll to the bottom, it isn't really giving us the effect we want. We need to check if there is a hash and return the position. Now let's check it out and see it in action. OK.
It's better as it is scrolling to the top but not so good as it is jumping back to the bottom. Something is making it not work properly. Looks like our transitions are causing us problems. We will have to add a mode Out In to our transition so that the current element transitions out first and when complete the new element transitions in.
Let's see if that helps. Much better. Now when we click on an experience it will scroll upwards starting at the top experiences which means that we don't have to manually scroll. This gives us a much better user experience.
Now to improve our user experience even more let's make sure our navigation is fixed to the top so if we are on an experience we can easily switch to a different destination without having to scroll. To do this we need to modify the CSS using the position of sticky. which means the navigation will always stick to the top. Now if we click on the experience, our sticky navigation is perfect.
However, the title of our experiences is a little hidden under the sticky navigation, which means we never know which country the experience is in. We can use the hash to not start at the top of the anchor by adding a position offset to our experience hash, so that it is offset by a certain number of pixels on the axis we choose. Let's add an offset along the y-axis of 250. That should position it nicely.
Okay, maybe 250 is a little too much. Let's try 140 instead. That should work much better. Now that is more like it.
If we click on an experience, it will scroll to the top and we can also see what country we are in and our navigation stays on the top, meaning we can easily switch destinations and experiences. Cool, our app is almost done. When using client-side routing, we may want to scroll to the top when navigating to a new route, or preserve the scrolling position of history entries just like RealPage Reload does. View Router allows you to achieve these, and even better, allows you to completely customize the scroll behavior on route navigation.
Let's tidy up our experiences and add some scroll behavior so that the list of experiences stays at the top of the page, which means we can easily navigate from one experience to the other. This will allow for a better user experience as our users can quickly browse through them without having to scroll all the time. To do this, we add the scrollBehaviour function to our router which receives the to and from root objects. The third argument, savedPosition, will result in a native-like behaviour when navigating with back forward buttons in the browser.
hash. If there is a hash, we scroll to the anchor by returning the selector. whereas if the returned position is falsy or an empty object we will retain the current scroll position. We can now add the hash in the router link tag in our destination details component.
We can give it the ID of experience and we then add the ID to where we want the anchor tag to be or where we want the page to scroll to. We should now add some padding to our experiences class as this will give us more spacing on the page and we can therefore see the scroll behaviour more clearly. And over in our experience details page We can remove the H1 tag as we don't need this. And let's add some padding to our Experience Details class.
Now let's check it out and see it in action. If we scroll on the page and click on an experience, we can see that the scroll behaviour does work as it remembers where we were on the page. However, if we scroll to the bottom, it isn't really giving us the effect we want. We need to check if there is a hash and return the position.
Now let's check it out and see it in action. OK. It's better as it is scrolling to the top but not so good as it is jumping back to the bottom. Something is making it not work properly.
Looks like our transitions are causing us problems. We will have to add a mode Out In to our transition so that the current element transitions out first and when complete the new element transitions in. Let's see if that helps. Much better.
Now when we click on an experience it will scroll upwards starting at the top experiences which means that we don't have to manually scroll. This gives us a much better user experience. Now to improve our user experience even more let's make sure our navigation is fixed to the top so if we are on an experience we can easily switch to a different destination without having to scroll. To do this we need to modify the CSS using the position of sticky.
which means the navigation will always stick to the top. Now if we click on the experience, our sticky navigation is perfect. However, the title of our experiences is a little hidden under the sticky navigation, which means we never know which country the experience is in. We can use the hash to not start at the top of the anchor by adding a position offset to our experience hash, so that it is offset by a certain number of pixels on the axis we choose.
Let's add an offset along the y-axis of 250. That should position it nicely. Okay, maybe 250 is a little too much. Let's try 140 instead.
That should work much better. Now that is more like it. If we click on an experience, it will scroll to the top and we can also see what country we are in and our navigation stays on the top, meaning we can easily switch destinations and experiences. Cool, our app is almost done.