jquery: remove URL fragment on click

Question

I have this type of hashing URLs,

http://mysite.com/projects/#/article-1/
http://mysite.com/projects/#/article-2/
http://mysite.com/projects/#/article-2/

And I want to remove the hash bit (the fragment) when I click on a button on the page without redirecting the page.

$('.back').click(function(){


    // remove the fragment.
    // don't know how to make it..
    return false;

});

So I can get this only,

http://mysite.com/projects/

How can I do that?

Thanks.

EDIT: How does this site make it? If you click close project on the ajax loaded page, eg -

http://www.pentagram.com/work/#/all/all/newest/2534/

you will get this back,

http://www.pentagram.com/work/#/all/all/newest/

Are you using anchors? What you need to do with the first substring? — Carlos Melo
– Carlos Melo, Commented Jun 27, 2011 at 16:41
no. I am loading an ajax page using location.hash and I want to remove it when I remove that ajax page. — Run
– Run, Commented Jun 27, 2011 at 16:44
Regarding your update: If you look closely you see that it does not remove the hash. It just removes part of the hash. — Felix Kling
– Felix Kling, Commented Jun 27, 2011 at 18:24
@Felix: thanks for pointing that out. I realised that after the edit! lol — Run
– Run, Commented Jun 27, 2011 at 21:06

tadman · Accepted Answer · 2011-06-27 16:41:43Z

2

The short answer is:

window.location.hash = '';

This will leave you with a trailing # though.

answered Jun 27, 2011 at 16:41

tadman

212k23 gold badges237 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

timw4mail Over a year ago

@Flix Kling history.pushState is only supported in Firefox, Chrome, and Safari at the moment.

Felix Kling Over a year ago

@timw4mail: I know. One would have to test whether it is supported of course.

Felix Kling Over a year ago

@lauthiamkok: It does not redirect. Jumping is different than redirect. Redirection means that the browser issues an HTTP request and loads a new page.

aorcsik · Accepted Answer · 2011-06-27 16:48:47Z

If I understand you right, you can try to mimic what would normally happen, I mean:

on click prevent default action
analyze the link, get tha hash part
find tha anchor on the page (y coordinate)
scroll to the anchor

Something like this:

$("a").click(function() {
    var loc = $(this).attr("href").split("#"),
        hash = loc[1] ? loc[1] : null;
    if (hash && $("a[name="+hash+"]").size() > 0)
    {
        var pos = $("a[name="+hash+"]").position();
        $(window).scrollTop(pos.top);
        return false;
    }
});

This way tha url remains the same, but you have the functionality.

no, that is not what I meant actually sorry. have a look on my edit please. thanks.

timw4mail · Accepted Answer · 2011-06-27 16:41:31Z

0

I'm pretty sure this isn't possible. You can get rid of everything after the hash by setting the location hash like this, though:

location.hash = '';

answered Jun 27, 2011 at 16:41

timw4mail

1,7862 gold badges13 silver badges16 bronze badges

1 Comment

timw4mail Over a year ago

In that case you'll need to remove your onhashchange event before you change the hash.

Collectives™ on Stack Overflow

jquery: remove URL fragment on click

3 Answers 3

3 Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Related