Same page navigation is when a link leads to a section of the same page without reloading. It can be beneficial when a page has a lot of content as it makes for an easier and faster navigation.
In this tutorial, I will use the example of a link that navigates back to the top of the page.
As the the page begins with the
html element, an ID is given to this element:
In the example above,
top has been declared as the value of the ID.
A link is created with the
href‘s value starting with a hashtag, followed by the value of the ID given to the element of the page it will lead to when clicked.
When the link is clicked, the page will not reload. However, a hashtag followed by the ID will appear at the end of the current URL.