Delete the # char from the url

Question

hey I'm having a little issue. Right now my navigator bar just take me to sections on my page. I did it using id which will connect the a tag to a specific section. I get to see the # char with the section name on the url for example:

http://orelhindi.s3-website.us-east-2.amazonaws.com/#skills

is there a way to make it dissapear?

  <div class="menu">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#cv">cv</a></li>
          <li><a href="#skills">skills</a></li>
          <li><a href="#portfolio">portfolio</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </div>
      ....
       <section id="skills" data-aos="fade-right">
      <ul>
        <li><i class="fab fa-java"></i></li>
        <li><i class="fab fa-js-square"></i></li>
        <li><i class="fab fa-node"></i></li>
        <li><i class="fab fa-angular"></i></li>
        <li><i class="fab fa-html5"></i></li>
        <li><i class="fab fa-css3-alt"></i></li>
        <li><i class="fab fa-git"></i></li>
        <li><i class="fab fa-aws"></i></li>
      </ul>
    </section>

thanks a lot!

I'd recommend to keep. It allows people to directly link to sections of your page. — Felix Kling, Jan 08 '19 at 21:50
Just to make sure I understand - you want to be able to navigate to a section without including the `#whatever` part of the URL? — Mike G, Jan 08 '19 at 21:51
use a JS plugin for one page scroll ... there is a lot of them — Temani Afif, Jan 08 '19 at 21:51

score 1 · Accepted Answer · answered Jan 08 '19 at 21:54

Technically yes: How to modify the URL without reloading the page?. Or you need to implement the scroll in JavaScript, making your life slightly more difficult.

And the # is useful, if someone shares the link anyone clicking on it will scroll to the correct place on the page.

score 1 · Answer 2 · answered Jan 08 '19 at 22:24

Alternative to Bob's answer. You can use JS to listen for the clicks and scroll the element into view.

Change all href to data-section-id
Using JS: query those a[data-section-id] elements
Add click event listener
Find the element with same id as data-section-id, and scroll it into view

Worth noting the support for scrollIntoView.

// When DOM is ready
document.addEventListener("DOMContentLoaded", function() {
    
 // Get all `a` elements with `data-section-id`
 document.querySelectorAll("a[data-section-id]").forEach(aElement => {
     
  // Add click event listener
  aElement.addEventListener("click", event => {
      
   // Store the element with `id` matching `data-section-id`
   const scrollToElement = document.getElementById(event.target.dataset.sectionId);

   // If element is not null, scroll to it
   if (scrollToElement !== null) {
    scrollToElement.scrollIntoView();
   }
  });
 });
});

<div class="menu">
        <ul>
          <li><a data-section-id="about">About</a></li>
          <li><a data-section-id="cv">cv</a></li>
          <li><a data-section-id="skills">skills</a></li>
          <li><a data-section-id="portfolio">portfolio</a></li>
          <li><a data-section-id="contact">contact</a></li>
        </ul>
      </div>
      ....
       <section id="skills" data-aos="fade-right">
      <ul>
        <li><i class="fab fa-java"></i></li>
        <li><i class="fab fa-js-square"></i></li>
        <li><i class="fab fa-node"></i></li>
        <li><i class="fab fa-angular"></i></li>
        <li><i class="fab fa-html5"></i></li>
        <li><i class="fab fa-css3-alt"></i></li>
        <li><i class="fab fa-git"></i></li>
        <li><i class="fab fa-aws"></i></li>
      </ul>
    </section>

Delete the # char from the url

2 Answers2