Reputation: 1731

disable anchor tag

How would I go about putting a link on a page that changes the url, but doesn't change the page without using hash states?

I want to put links that change the url and scroll to a corresponding section of the page. I don't want to use hashes as they just jump to the section instead of scrolling, and I think hashes dont look very good in the url.

Upvotes: 1

Answers (4)

Blazemonger

Reputation: 92893

Browsers now have security features that ensure that the URL displayed in the location bar matches what's actually being displayed. You can't change the location without changing the page at the same time.

However, you can scroll the page anywhere you like without changing the URL. To scroll to a particular element, get its position and use .animate():

$('body').animate({scrollTop: $('#element').position().top});

Combine this with an .on('click',...) handler that uses e.preventDefault() to cancel the URL change and you're good to go.

$('a[href^=#]').on('click', function(e) { // apply to all hash links
    var el = $(this).attr('href');        // get the href
    e.preventDefault();                   // cancel default click action
    $('body').animate({
        scrollTop: $(el).position().top   // scroll to the href ID instead
    });
});

http://jsfiddle.net/mblase75/WFKUE/

Upvotes: 1