Question

Maybe this isn’t possible with ASP.NET MVC because I can not find an answer. What I want to do is click a link which will load the target page then scroll to anchor on that page. A perfect example of this was answered in this question.

However how do I get this to work with JavaScript/jQuery?

UPDATE:With this code everything is working except for the setTimeOut definition. It just keeps running the script until I click stop, then if scrolls down to the anchor. Why is that?

var jump = function (e) {
    if (e) {
        e.preventDefault();
        var target = $(this).attr("href");
    } else {
        var target = location.hash;
    }

    $('html,body').animate(
{
   scrollTop: $(target).offset().top
}, 2000, function () {
   location.hash = target;
});

}

$('html, body').hide();
$(document).ready(function () {
    $('a[href^=#]').bind("click", jump);

    if (location.hash) {
        setTimeout(function () {
            $('html, body').scrollTop(0).show();
            jump();
        }, 0);
    } else {
        $('html, body').show();
    }        

});

Answer 1

I know nothing about asp.net, but this is what I think is happening:

ASP.NET MVC’s MicrosoftAjax module reloads a page on initialization if hash is supplied in location.

The MVC framework, namely its MicrosoftAjax component, attempts some browser’s history management and it uses the hash portion of URL for that matter, which is a valid standard procedure, up until this point. At initialization time, the Sys$_Application$initialize() through _navigate() engages the _raiseNavigate() application method. And this one does some dances specifically for Firefox:

// Name:        MicrosoftAjax.debug.js
// Assembly:    System.Web.Extensions
// Version:     4.0.0.0
// FileVersion: 4.0.20526.0

if ((Sys.Browser.agent === Sys.Browser.Firefox) && window.location.hash &&
    (!window.frameElement || window.top.location.hash)) {
    window.history.go(0);
}

Three conditions:

1. browser is Firefox
2. address carries a hash portion after the URL
3. it is not inside a frame

All of them pass in your case and the beast is unleashed:

window.history.go(0);

That instructs browser’s history manager to go back or forward by the distance given as argument. -2 goes one step back, 1 goes one step forward. Thus 0 effectively reloads the page. And does it on every page load for any hash given to the page. Can’t think of any valid purpose of this line there anyway…

Sure enough if I comment out those rather hairy and pointless lines, it works! It seems to be a backward compatibility attempt for Firefox 3.5 or lower, so I would say remove it or better update your MVC.