Page scroll to different page

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

});

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. — Lars Hovden, Apr 10 '12 at 16:31
Is this possible by using an ActionLink. BTW I'm using ASPX pages, — Lars Hovden, Apr 10 '12 at 18:41
See this question: http://stackoverflow.com/questions/7110023/firefox-6-infinite-page-refresh-with-page-with-hash-tags This one probably duplicates it. Definitely a asp.net mvc problem... — Petr Vostrel, Apr 12 '12 at 11:03

score 2 · Accepted Answer · answered Apr 12 '12 at 15:02

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:

browser is Firefox
address carries a hash portion after the URL
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.

You're welcome :) For completenes: did you update or did you patch the current version? — Petr Vostrel, Apr 12 '12 at 19:07

score 1 · Answer 2 · answered Apr 10 '12 at 18:54

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>

answered Apr 10 '12 at 18:54

Alexander Beletsky

19,453
9
63
86

Link – Alexander Beletsky Apr 10 '12 at 19:02
ok so it works. however, it didn't do the scroll animation and the page is consistently refreshing – Lars Hovden Apr 10 '12 at 19:14
make sure you are pointing to existing anchor.. debuggin the code helps as well. – Alexander Beletsky Apr 10 '12 at 19:17
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? – Lars Hovden Apr 10 '12 at 21:19

score 0 · Answer 3 · edited May 23 '17 at 12:28

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...

edited May 23 '17 at 12:28

Community

1
1

answered Apr 10 '12 at 14:38

EdSF

11,753
6
42
83

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.. – Petr Vostrel Apr 12 '12 at 11:00

score 0 · Answer 4 · answered Apr 11 '12 at 18:20

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.

answered Apr 11 '12 at 18:20

Lars Hovden

317
2
25

I've been able to replicate also with Firefox 10.1 – Petr Vostrel Apr 12 '12 at 11:02

Page scroll to different page

4 Answers4