Scroll to anchor whilst keeping the hash

Question

I have a page with navigation to various sections. Each one provides an anchor tag for that page so someone can revisit the section easily. What I want is for the normal mechanism to work correctly but instead of jumping to the section (as per normal browser behavior) I want it to scroll there.

I have implemented the scrolling which works well I just dont know how to keep the hash URL as e.preventDefault() stops this from occuring. If I remove this line then the page flashes before scrolling.

$(".navigation a").click(function(e){
    $(".navigation a").removeClass("active");
    $(this).addClass("active");

    if ($(this).attr("href").substring(0,1) == "#"){
        e.preventDefault();

         $('html, body').animate({
             scrollTop: $($(this).attr("href")).offset().top
         }, 1000);
    }
});

Check this out: http://stackoverflow.com/questions/6478485/jquery-change-the-url-address-without-redirecting — Andre Calil, Jul 22 '13 at 17:25
How does that help me? Modifying `document.location.hash` instantly jumps the page without scrolling! — Chris, Jul 22 '13 at 17:28
@Chris you can bind a handler for that event and do nothing, read the full answer — Andre Calil, Jul 22 '13 at 17:29
@Chris Another related question: http://stackoverflow.com/questions/1457/modify-address-bar-url-in-ajax-app-to-match-current-state — Andre Calil, Jul 22 '13 at 17:32
@Chris: Dont use `return false;` unless you know what you are doing :) There is some info on the internet as to why — Martijn, Jul 22 '13 at 17:32
@Chris Side note: you could change `$(".navigation a").removeClass("active");` to `$(".navigation a.active").removeClass("active");`. It will be faster as you narrow the scope. — Andre Calil, Jul 22 '13 at 17:33

Martijn · Accepted Answer · 2013-07-22T17:42:08.990

I dont know how well you have to support old browsers, but otherwise you can use pushState functionallity That url gives documentation about how to use it :)

Supported by all browsers and IE10 (so no 9 or less)

A no-pushstate solution would be to scroll to the proper height, and then change the url. If properly done, the page wont hop :)

// you should change class navigation to id navigation, since there probally is only one
$(".navigation".find("a").click(function(e){ // with id this will speed up a bit
    //$(".navigation a").removeClass("active");
    $(".navigation a.active").removeClass("active"); // with A its faster
    $(this).addClass("active");
    var anchorDestination = this.href; // save for later, select as little times as possible

    //if ($(this).attr("href").substring(0,1) == "#"){
    if ( this.href.substring(0,1) == "#"){ // use native JS where possible
        e.preventDefault();
        var anchorDestination = this.href; // save for later
        var $aElem = $(this); // select it once, save it for later

        $('html, body').animate({
             //scrollTop: $($(this).attr("href")).offset().top
             scrollTop: $aElem.offset().top
        }, 1000, function(){
             window.location = anchorDestination;
        });
    }
});

No idea why I didnt think of this, thanks this is a good answer — Chris, Jul 22 '13 at 17:38
Familiar problem is programworld :P We sometimes think too big. Also, check out the tips I added :) — Martijn, Jul 22 '13 at 17:42
Cheers for tips, when something isnt being used in a for loop or I dont have many elements I favour readability over straight efficiency though :) — Chris, Jul 23 '13 at 09:07
Yeah I understand. I added it to show people how to use it :) This example is a bit too simple to see that. The 'id instead of class' remains tho — Martijn, Jul 23 '13 at 10:38

Scroll to anchor whilst keeping the hash

1 Answers1