1

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();
    }        

});
Improve this question
3
  • I know there is a Jquery scroll to plugin for an anchor on the same page. But how do I get to an anchor on a different page. Commented Apr 10, 2012 at 16:31
  • Is this possible by using an ActionLink. BTW I'm using ASPX pages, Commented Apr 10, 2012 at 18:41
  • See this question: stackoverflow.com/questions/7110023/… This one probably duplicates it. Definitely a asp.net mvc problem... Commented Apr 12, 2012 at 11:03

4 Answers 4

Reset to default
2

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.

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

1 Comment

You're welcome :) For completenes: did you update or did you patch the current version?
1

It's not a problem with jQuery. In your view you should put some code,

<script>
  $(function () }

     var hash = window.location.hash;
     var achor = hash.substring(hash.indexOf('#'));

     $('html,body').animate({scrollTop: $("#"+achor).offset().top} 

  });
</script>
Improve this answer

4 Comments

<a href="/mypage#myanchor">Link</a>
ok so it works. however, it didn't do the scroll animation and the page is consistently refreshing
make sure you are pointing to existing anchor.. debuggin the code helps as well.
I stopped the refreshing part, and I got the scrolling effect when I'm on the same page as the anchor. But when I'm on a different page than the anchor, how do I first load the correct page then go to the anchor?
0

This really isn't about ASP.NET MVC, more about client side scripting (Javascript). See this SO thread regarding the hash (#) as it relates to routing...which I think is the only item related to ASP.Net MVC...

Improve this answer

1 Comment

On the contrary. I had a chance to play with Lars's code and after taking out every piece of script leaving just MicrosoftAjax.js in as the only script, it still exhibits the problem. Seems like MicrosoftAjax.js tries to handle the hash portion of URL by itself somehow..
0

I answered my own question partially. I always use Firefox, so my testing was in Firefox 11.0. I quick checked it in IE and it worked. Tested it in previous versions of Firefox and it worked. It is just not working in Firefox 11.0. I will close this question and open a new one addressing the appropriate issue.

Improve this answer

1 Comment

I've been able to replicate also with Firefox 10.1

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.