Steps for eliminating the #id from a URL page

Question

Steps for eliminating the #id from a URL page

Can someone assist me in removing or hiding my #id from the URL browser?

For example:

My menu1 targets "#p1"
My site is "mysite.com/index.htm"
When I click menu1 on my browser, it will show as "mysite.com/index.htm#p1"

I want my id to not show on the URL browser, just "mysite.com/index.htm" without the appended #p1.

#p1:target { background: red;}
#p2:target{ background: green;}
#p3:target{ background: blue;}
#p4:target{ background: yellow;}
#p5:target{ background: coral;}
#p6:target{ background: skyblue;}

ul{list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {float: left;}

li a{ display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}

li a:hover {
    background-color: #111;
}

<div id="menu">
    <input type="checkbox" id="tbl-menu"/>
    <label for="tbl-menu"><img src="drop.png" height="40px"  width="40px" alt=""></label>
        <nav class="nav">
        <ul class="tombol">
        <li class="tombolmenu">
            <a class="t1" href="#p1">Menu1</a></li>
            <li><a class="t2" href="#p2">Menu2</a></li>
            <li><a class="t3" href="#p3">Menu3</a></li>
            <li><a class="t4" href="#p4">Menu4</a></li>
            <li><a class="t5" href="#p5">Menu5</a></li>
            <li><a class="t6" href="#p6">Menu6</a></li>
         </ul>
         </nav>    
      </div>

<!-- My page target -->

<div id="p1">  Page1 </div>
<div id="p2">  Page2 </div>
<div id="p3">  Page3 </div>
<div id="p4">  Page4 </div>
<div id="p5">  Page5 </div>
<div id="p6">  Page6 </div>

javascript jquery html css .htaccess

Answer 1

Answer №1

Although this question may be considered dated in Internet years, I wanted to share my solution, which is inspired by Janmejay Agrawal's approach.

Essentially, it modifies the default behavior of a hyperlink to create a smooth scrolling effect to the desired element.

This script is written in "vanilla" JS and is compatible with most web browsers.

//Retrieve all hyperlink elements
var links = document.getElementsByTagName("a");

//Iterate through the array of links
Array.prototype.forEach.call(links, function(elem, index) {
  //Check if the hyperlink points to an id
  var elemAttr = elem.getAttribute("href");
  if(elemAttr && elemAttr.includes("#")) {
    //Replace the default action with smooth scrolling to the target element
    elem.addEventListener("click", function(ev) {
      ev.preventDefault();
      //Smooth scroll to the target element by finding the href's target id using regex
      document.getElementById(elemAttr.replace(/#/g, "")).scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "nearest"
          });
    });
  }
});

If there are any errors in this code, please feel free to bring them to my attention!

Answer 2

Although this question may be considered dated in Internet years, I wanted to share my solution, which is inspired by Janmejay Agrawal's approach.

Essentially, it modifies the default behavior of a hyperlink to create a smooth scrolling effect to the desired element.

This script is written in "vanilla" JS and is compatible with most web browsers.

//Retrieve all hyperlink elements
var links = document.getElementsByTagName("a");

//Iterate through the array of links
Array.prototype.forEach.call(links, function(elem, index) {
  //Check if the hyperlink points to an id
  var elemAttr = elem.getAttribute("href");
  if(elemAttr && elemAttr.includes("#")) {
    //Replace the default action with smooth scrolling to the target element
    elem.addEventListener("click", function(ev) {
      ev.preventDefault();
      //Smooth scroll to the target element by finding the href's target id using regex
      document.getElementById(elemAttr.replace(/#/g, "")).scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "nearest"
          });
    });
  }
});

If there are any errors in this code, please feel free to bring them to my attention!

Answer 3

Answer №2

If you're looking to implement smooth scrolling for in-page links, one effective method is to create a custom function rather than relying solely on the browser. Here's an example:

$("a[href^='#']").click(function(e){
  e.preventDefault();
  var targetElement = $($(this).attr('href'));
  
  if(targetElement.length) {
    $('html, body').animate({
      scrollTop: targetElement.offset().top
    }, 800);
  }
});

Using this approach not only hides the '#id' from the URL but also provides a visually pleasing scrolling effect. Give it a try and see if it works for you!

Answer 4

If you're looking to implement smooth scrolling for in-page links, one effective method is to create a custom function rather than relying solely on the browser. Here's an example:

$("a[href^='#']").click(function(e){
  e.preventDefault();
  var targetElement = $($(this).attr('href'));
  
  if(targetElement.length) {
    $('html, body').animate({
      scrollTop: targetElement.offset().top
    }, 800);
  }
});

Using this approach not only hides the '#id' from the URL but also provides a visually pleasing scrolling effect. Give it a try and see if it works for you!

Steps for eliminating the #id from a URL page

Answer №1

Answer №2

Similar questions

Is there a way to restrict the orientation of a UIWebView using JavaScript or HTML?

Querying data from a promise and embedding it in a JSON object in AngularJS

Vue router is unable to render or mount the component at the root path

What is the best way to create an arrow that tracks the browser window, but only goes as far as the end of its designated container

Angular version 8.2 combined with Firebase can result in errors such as those found in the `./src/app/app.module.ngfactory.js` file towards the end of the process when attempting to build with

The 404 error is handled by the express application before continuing to other routes. Some routes may not be recognized by the express.Router module

Utilizing getServerSideProps in the new app router (app/blah/page.tsx) for maximum functionality

Remove image files from a directory with jQuery without relying on PHP or AJAX

Calculate the sum in real-time using JavaScript

Can you guide me on how to adjust the correct view on my controller?

An issue occurred while the request was being transported or processed, resulting in Error code 10 at Path /wardeninit

Utilizing AngularJS and RequireJS for intricate routing within web applications

Determine the location of a character based on its index position

Utilize the string module from a JavaScript file in your React or Next.js project

Pass a notification to a separate function

Refine objects based on their properties without removing them from the dataset

Automatically populate the checkbox with the specified URL

Tracking mouse positions across an HTML document

Should you opt for returning [something] or (nothing) in Javascript with ExpressJS?

My web browser doesn't recognize my JavaScript as actual JavaScript?