Navbar Elements

Question

I've made a navigation bar with 4 elements(HOME, ABOUT, PROJECTS, CONTACT). Each element is an anchor tag with self id. I want by clicking on element to go on respectively section but I don't want my url to be like this #about or #contact

This is my code:

<ul>
      <li>
           <a href="/">Home</a>
      </li>

      <li>
            <a href="#about">About</a>
       </li>

       <li>
            <a href="#services">Services</a>
       </li>

       <li>
           <a href="#contact">Contact</a>
       </li>

 </ul>

Welcome to Stack Overflow. Please share your code or a minimal reproducible example to make it easier for people to help. — Gh05d, Sep 25 '20 at 07:46
You can't do this in pur html. What you can do is to use javascript and on click you go to your section. Have a look to this question to achieve it: https://stackoverflow.com/questions/13266746/scroll-jump-to-id-without-jquery — johannchopin, Sep 25 '20 at 07:56
Take a look here https://stackoverflow.com/questions/15223006/scroll-with-anchor-without-in-url — Yalcin Kilic, Sep 25 '20 at 07:58

score 0 · Accepted Answer · answered Sep 25 '20 at 15:49

You can't do this in pure HTML, but you can implement something similar in Javascript.

Something like this that just scrolls the sections into view:

<ul>
      <li>
           <a href="/">Home</a>
      </li>

      <li>
            <a onclick="document.getElementById('about').scrollIntoView()">About</a>
       </li>

       <li>
            <a onclick="document.getElementById('services').scrollIntoView()">Services</a>
       </li>

       <li>
           <a onclick="document.getElementById('contact').scrollIntoView()">Contact</a>
       </li>

 </ul>

Or it might be better to define one function that you can call quickly like this:

<ul>
      <li>
           <a href="/">Home</a>
      </li>

      <li>
            <a onclick="scrollforme('about')">About</a>
       </li>

       <li>
            <a onclick="scrollforme('services')">Services</a>
       </li>

       <li>
           <a onclick="scrollforme('contact')">Contact</a>
       </li>

 </ul>

    
<script>
function scrollforme(sectionid){
    document.getElementById(sectionid).scrollIntoView();
}
</script>

Navbar Elements

1 Answers1