63

I am ajax-ifying the pagination in one of me projects and since I want the users to be able to bookmarks the current page, I am appending the page number via hash, say:

onclick="callPage(2); window.location.hash='p=2'; return false;"

and thats on the hyperlink it works fine and everything, except, when the page number is 1, i dont want to URL to be /products#p=1, I just want it to be /products

I tried these variations:

  1. window.location.hash='' works but the url is now like /products# and I dont quite the hash there.
  2. not using window.location.hash at all, but when the user comes back to page 1 from, say page 3, he is in page one, but url is still /products#p=3 since I am not messing with the hash.
  3. Google search on this led me to several minutes (about 15) of silly forums where the question was asked right, but answers were suggesting that the page jumps because the thread creator had a hash in href like <a href="#"> and he should use javascript:void(0) instead. (had they never heard of Ajax?)

So finally, I decided to make this thread, I found several similar threads here, but all the answers ls very similar to my second point.

so my big question still remains a question: How to kick the hash out of the URL and possibly out of the universe? (only for the first page!)

7
  • I see backticks are not valid in ordered lists.
    – iamserious
    Dec 22, 2010 at 11:14
  • @iamserious: They are, if you use Markdown and not HTML to create those lists ;) Dec 22, 2010 at 11:16
  • @Kling, aha! this is neat, thanks!
    – iamserious
    Dec 22, 2010 at 11:20
  • 2
    @maksymko, I guess its just personal preference, but I would like a clean url, I mean, if there isn't anything after hash, why bother adding it in the first place? also, I was wondering if search bots look at /products and /products# as two different pages?
    – iamserious
    Dec 22, 2010 at 12:16
  • 1

5 Answers 5

95
history.pushState("", document.title, window.location.pathname);
5
  • just gave it a quick try, it's removing the query parameters too... not desirable!
    – iamserious
    Mar 12, 2012 at 10:58
  • 9
    thanks, just what I needed (although granted, I do not mind removing the query parameters (which can, however, be maintained with no problem by simply adding the query string, e. g. history.pushState('', document.title, window.location.pathname+window.location.search);))
    – arik
    Aug 27, 2012 at 13:31
  • 2
    Good for new browsers, but IE9 and less doesn't support it. Just like to point that out.
    – jdepypere
    Apr 14, 2013 at 13:05
  • 4
    This also creates a entry in the history (obviously). So when the user clicks the back button she will be on the same page.
    – enyo
    Mar 5, 2014 at 17:24
  • 9
    history.replaceState( ... ) would probably be more appropriate if you're worried about @enyo problem Feb 17, 2015 at 19:35
68

Updated Answer:

Best way to achieve this is to follow Homero Barbosa's answer below:

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

... or, if you want to maintain the search parameters:

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

Original Answer, do not use this, badwrongfun:

var loc = window.location.href,
    index = loc.indexOf('#');

if (index > 0) {
  window.location = loc.substring(0, index);
}

... but that refreshes the page for you which seems a trifle rude after just arriving there. Grin and bear it seems to be the best option.

5
  • 1
    You can also compromise and settle for something like /products#First which is bit more elegant than /products#p=1 :) Dec 22, 2010 at 12:05
  • this worked for me, you can also save the string again instead of changing the page: var hashIndex = userUrl.indexOf('#'); if (hashIndex > 0) { userUrl = userUrl.substring(0, hashIndex); }
    – benbyford
    Apr 10, 2015 at 15:37
  • Below is a better answer!!
    – zardilior
    Jul 12, 2015 at 3:23
  • 3
    history.pushState("", document.title, window.location.pathname); will also remove php query strings i.e. "?key=hello". How can we remove just the hash without removing the query string?
    – ray9209
    Aug 3, 2015 at 19:11
  • I'm getting undefined name "history" Jul 27, 2020 at 10:21
7

Worked For me Perfectly

$(window).on('hashchange', function(e){
  window.history.pushState("", document.title, window.location.pathname);  
 // do something...
});
1
  • Best and simplest answer, by far. Nov 11, 2019 at 4:09
5
var urlWithoutHash = document.location.href.replace(location.hash , "" );
1
  • This has issues, like if the hash is a short word.
    – redolent
    Jul 1, 2015 at 22:28
4
function removeHash () { 
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}
2
  • Please, add explanation to your answer.
    – Alex
    Oct 28, 2015 at 6:24
  • 1
    This has been shamelessly copied from this answer. Mar 1, 2018 at 15:46

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.