Same page navigation

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top