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.
Sections
As the the page begins with the html element, an ID is given to this element:
<html id="top"></html>In the example above, top has been declared as the value of the ID.
Links
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.
<a href="#top">Top</a>URL
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.
https://example.com/about.html#top
