Link to a Certain Part of a Page
HTML, Anchor, NAVBAR, Menu, Links 9/8/2020
HTML use: 100% | No CSS or JS involved.
Do you need to make a menu or link that jumps to a certain part of a page? Well then keep reading because this article is for you.
If you want to create a link to other sections in the same page, here is what you need to do:
Step 1:
In your navbar, (or the place you want to create the link) create an anchor link with a hashtag like this:
<div id="navbar">
<a href="https://kwcodedesign.neocities.org/index.html">Home< /a>
<a href="#about">About< /a>
<a href="#blog">Coding Blog< /a>
<a href="#todolist">To Do List< /a>
<a href="#contact">Contact< /a>
< /div>
<a href="#about">About< /a>
<a href="#blog">Coding Blog< /a>
<a href="#todolist">To Do List< /a>
<a href="#contact">Contact< /a>
< /div>
Step 2: In your about section,(or where you want to jump to) create another anchor link. The link in the section you are jumping to doesn’t even have to be visible on the page for it to work.
Take a look at the examples below.
<a href="#about" class="aboutsection">< /a>
Alternatively, if you want to travel to another page and not load the default(at the top) but rather start out at the about section, then create the menu link with the url, and then add #about at the end of the url, like this:
<div id="navbar">
<a href="https://kwcodedesign.neocities.org/index.html">Home/a>
<a href="https://kwcodedesign.neocities.org/index.html#about">About< /a>
<a href="https://kwcodedesign.neocities.org/index.html#blog">Coding Blog< /a>
<a href="https://kwcodedesign.neocities.org/index.html#todolist">To Do List< /a>
<a href=https://kwcodedesign.neocities.org/index.html#contact”>Contact< /a>
</div>
<a href="https://kwcodedesign.neocities.org/index.html#about">About< /a>
<a href="https://kwcodedesign.neocities.org/index.html#blog">Coding Blog< /a>
<a href="https://kwcodedesign.neocities.org/index.html#todolist">To Do List< /a>
<a href=https://kwcodedesign.neocities.org/index.html#contact”>Contact< /a>
</div>