Remove hash id from url

I have a menu header and when you click one of the menu links it directs to another page half way down (which i want) as it finds the relevant div id name. I was wondering if there is a way to clean the url back up again so it doesn't include the #id in my url? Tried window.location hash and this breaks it from scrolling and leaves the # in the url. Here is what i have:

In my menu: <li><a href="about#scroll-to" ....

And on the about page, it scrolls down to a div called #scroll-to..<div id="scroll-to"></div>

Any suggestions would be great. Thanks!

回答1:

Using jquery, you can make a POST call to the target page when menu is clicked.

The POST data will contain the id of the div where you want to slide to.

On your target page, use your server language (php, asp) to output that id in a js variable and on document ready slide using jquery to that id.

Then you will have a clean url, and the page scrolling to your div.

---- edit: here comes the code!

Lets use jquery to make a POST to the target page, when a menu item is clicked. We will add a class, lets say, "mymenuitem". We will add this class to our link in the menu. So we will have

<li><a href="YOURTARGETPAGE.HTML#scroll-to" onClick="javascript:return false;" class="mymenuitem">Information about us</a></li>

(the onClick stops link from redirecting manually) and an empty form (put it after the < body >)

<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>

then we will create the neccessary jquery so when the < a > tag with class "mymenuitem" is clicked, we will make a POST to the target page.

<script type="text/javascript">
jQuery(document).ready(function(){
    $(".mymenuitem").click(function() {

    // we will split the clicked href's value by # so we will get [0]="about" [1]="scroll-to"
    var the_anchor_id_to_scroll_to =  $(this).attr("href").split('#')[1]; 

    // lets do the POST (we WILL TRIGGER a normal FORM POST while appending the correct id)

    $("#slidinganchorform").append('<input type="hidden" name="anchorid" value="'+ the_anchor_id_to_scroll_to + '">');
    $("#slidinganchorform").submit();
    });
});
</script>

then in our YOURTARGETPAGE.HTML we will have something like (let's assume we use php)

<head>

<!-- make sure your jquery is loaded ;) -->

<?php 
if($_POST['anchorid']!='')
{
?>
<script type="text/javascript">
jQuery(document).ready(function(){
    // lets get the position of the anchor (must be like <a name="scroll-to" id="scroll-to">Information</a>)
    var thePositiontoScrollTo = jQuery('#<?php echo $_POST['anchorid']; ?>').offset().top;
    // Lets scroll
    jQuery('html, body').animate({scrollTop:thePositiontoScrollTo}, 'slow');
});
</script>
<?php
}
?>
</head>

be sure the correct id must exist ;)

<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>

(remove your old code because i changed some variable names and it will be difficult to debug if there are parts from the previous version. write everything from the start )

回答2:

You can do this when the new page loads

history.pushState("", document.title, window.location.pathname);

However it will also remove the query string. Although, you could play with it a little bit to keep it