Remove the pound symbol from the web address

Hi there, I'm currently facing a small issue with my navigation bar. Right now, it takes me to specific sections on the page by linking to them with an ID. However, this results in the "#" character followed by the section name appearing in the URL, like this:

Is there any way to remove or hide this from the URL?

<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>

Thank you for your help!

Answer №1

Indeed, it is possible: How to change the URL without reloading the page?. Alternatively, you can implement scrolling in JavaScript, adding a bit more complexity to your task.

The use of # can be beneficial; when someone shares the link, clicking on it will automatically scroll to the correct section of the page.

Answer №2

A different approach from Bob's solution. Utilize JavaScript to detect clicks and smoothly scroll the element into view.

  1. Replace all instances of href with data-section-id
  2. Using JavaScript, select all elements with a[data-section-id]
  3. Attach a click event listener
  4. Locate the element with the corresponding id as data-section-id and scroll it into view

It is important to consider the compatibility for scrollIntoView.

// Execute when the DOM is loaded
document.addEventListener("DOMContentLoaded", function() {
    
// Retrieve all `a` elements with `data-section-id`
document.querySelectorAll("a[data-section-id]").forEach(aElement => {
    
// Add click event listener
aElement.addEventListener("click", event => {
    
// Save the element with an `id` that matches the `data-section-id`
const scrollToElement = document.getElementById(event.target.dataset.sectionId);

// If the 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to identify the specific table row <tr> where the keyup event is triggered?

I am facing an issue with editing a long table on the screen. The table has 10,000 rows and 10 columns and I want to be able to save changes made to individual rows without having to save the entire table each time. Each row has a unique id along with the ...

unable to retrieve access-token and uid from the response headers

I am attempting to extract access-token and uid from the response headers of a post request, as shown in the screenshot at this https://i.sstatic.net/8w8pV.png Here is how I am approaching this task from the service side: signup(postObj: any){ let url = e ...

The HTML form label offers a choice between two alternatives

My usual method of styling forms involves organizing elements like this: <label for="CompanyNameTextBox"> <span>Company</span> <input name="CompanyNameTextBox" type="text" id="CompanyNameTextBox" /> </label> This set ...

Changing classes within Twitter Bootstrap 3 causes a shift in style and layout

Currently, I am working with Twitter Bootstrap 3 and have a DIV that contains either an image or video. The div has a col-sm-3 class, but when hovering over it, I use jQuery to switch it to a col-sm-12. I am wondering if there is a way to create a smooth ...

Is it possible to retrieve values from multiple JSON objects and display them together in a single table using the Datatable

I have a situation where I need to utilize datatables to display data along with view, edit, and delete buttons. In order to achieve this, I am fetching user information and permissions from two separate objects structured like so: { "data": [ ...

How can I display multiple images in a single row using PHP echo?

I am struggling with my PHP code that displays images from a database. The issue I'm facing is that the images are all appearing in a single column, but I want them to be displayed in one row so that users can scroll horizontally to view them. How can ...

Set the background color of the list item to a color that I choose

I am dealing with colors on my server side. I have a list structure in place. When loading the jsp, I need to assign specific colors to specific list items. The color from the server side may change and the assignment of colors to list items depends on the ...

Automate scrolling to the rightmost column in a table

What is the best way to navigate to the last column in a table with horizontal scrolling without directly targeting the last column? For example, instead of using: document.getElementsByClassName('makeStyles-tableCell-251')[document.getElements ...

Adding a new column to a table that includes a span element within the td element

I am attempting to add a table column to a table row using the code below: var row2 = $("<tr class='header' />").attr("id", "SiteRow"); row2.append($("<td id='FirstRowSite'><span><img id='Plus' s ...

Is the "Illegal invocation" error popping up when using the POST method in AJAX?

Is there a way to retrieve JSON data using the POST method in Ajax? I attempted to use the code below but encountered an error: TypeError: Illegal invocation By following the link above, I was able to access JSON-formatted data. However, please note th ...

Is it possible to have separate settings for two different Colorbox popups on the same page?

I stumbled upon a solution for handling multiple colorboxes on the same webpage over at this Stack Overflow post function applyColorboxTheme() { var selectedTheme = $(this).attr("data-theme"); $(".colorboxTheme").attr("disabled", "disabled"); ...

Storing data in MongoDB using JavaScript on a web platform

Imagine a straightforward website with a common structure <html> <head></head> <body> <script type="text/javascript"> </script> </body> </html> Can data be written to MongoDB fr ...

In ReactJS, when passing an array of objects to a child component, the first instance may sometimes return as undefined, causing the code to break

Currently, I am in the process of creating a personal blog for my brand. The "Posts" section is designed to retrieve data from a basic JSON via an API. At present, I have used mirageJS to mock the API and employed the useEffect and useState hooks to set th ...

Getting rid of the hover box feature in a WordPress theme

Having some difficulty removing the hover effect on the WordPress theme I'm using, called Enigma. The hover effect creates a whitebox over the link, and despite trying various methods to remove it, the issue persists. You can view the website at the ...

Preventing Form Submission from Redirecting to the Top in an HTML Document with PHP

Recently, I integrated a php form into my html code and changed the file from index.html to index.php. The contact form is functioning perfectly and sending all information as expected. However, after submitting the form, users are receiving the message "T ...

Inject EJS Template String into Express CSS File to Customize Background Image of an HTML Element

I have successfully configured a css file for my Express ejs web app. All the styles are displaying correctly, paths are accurate, and everything is working perfectly. Within one of my ejs files, the structure looks like this: <%- include ("partials/h ...

Ways to incorporate various styles on a mobile screen for a javascript-generated function

In my current project, I have implemented a JavaScript function that renders HTML within a module. function generateHTML(bankName) { let content = `<div class="bankName" style=""><strong style="font-size: 28px;font-wei ...

Removing duplicate elements within a parent div using jQuery

I'm looking to eliminate duplicate elements of the same class within a parent div. I tried using the code below, but it ends up removing all elements except the first one. let found = {}; $('.product-bottom').each(function(){ let $this ...

Unexpectedly, nextJS is facing difficulties resolving components

I've encountered an issue while working on my website in NextJS. It suddenly started showing an error message about being unable to resolve multiple elements: https://i.sstatic.net/fQf1rf6t.png Here are a few things that I attempted, but unfortunately ...

What is the process for altering the background color of a modal?

I'm trying to figure out how to change the background color of my modal once it's displayed, similar to this example: https://i.stack.imgur.com/fOUDZ.png. I want the background color to cover the entire page and not just the modal itself. When I ...