4

This is baffling me and I'm afraid I might be doing something very silly.

I have a form that does an ajax call, and on success, reloads the (same) page and jumps to the submitted data toward the bottom of the page using a URL hash/fragments.

window.location.href = "/this/url/#post-10";
window.location.reload();

...

<div id="post-10">...</div>

I notice that at least with Chrome, the previous scroll position is being favored over the anchor link I am providing - so the page reloads, succesfully jumps to my id anchor, but once the page is finished loading, it jumps up to where the scroll was on the previous page.

Is this standard behaviour? Is the best approach to fixing this to simply force the pages position using onLoad or something similar?

Timmy O'Mahony
  • 53,000
  • 18
  • 155
  • 177

2 Answers2

2

window.location.href = "/this/url/#post-10"; will work on its own, there's no need to reload the page a second time, which will (to the best of my knowledge) favor the previous scroll position.

Elliot Bonneville
  • 51,872
  • 23
  • 96
  • 123
  • because I am reloading the current page, it seems not to refresh the page and just sits there. I imagine this might be to do with caching? – Timmy O'Mahony May 17 '12 at 17:09
  • Ok, it seems that this should work, but for some odd reason, changineg `window.location.href` within the `success` callback of my ajax call doesn't work – Timmy O'Mahony May 17 '12 at 17:36
1

If you are using ajax, why reloading the page ?

Just remove the line window.location.reload();

window.location.href = "/this/url/#post-10"; is sufficient to take the scroll to that post-10 portion.

Btw, a better (cool) approach would be to use a scroll effect.

var targetOffset = $('#post-10').offset().top ;
var scrollElem = scrollableElement('html', 'body');

$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
    // scroll is complete
      location.hash = 'post-10';
});

   // Use the first element that is "scrollable"  (cross-browser fix?)
function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
        var el = arguments[i],
        $scrollElement = $(el);
        if ($scrollElement.scrollTop()> 0) {
            return el;
        } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
                return el;
            }
        }
    }
    return [];
}
Jashwant
  • 28,410
  • 16
  • 70
  • 105
  • thanks for the reply. that's a good idea, unfortunately, the ajax reply doesn't update the page, it just submits the data. The page needs then be reloaded to see the changes. This is out of my control for the moment so I need a way to get it working – Timmy O'Mahony May 17 '12 at 17:30
  • Is `/this/url/` the same page that calls ajax ? – Jashwant May 17 '12 at 17:45
  • I'm on page `/url/a/` which uses the ajax to submit data to `/url/b/` and on the succecss of the ajax submit, I want to reload the page `/url/a/#comments` – Timmy O'Mahony May 17 '12 at 17:49
  • If you will reload, you wont get scroll to `hash` thing. If you do `window.location.href = "/this/url/#post-10"` page wont reload as you are only changing the `hash`. So, look [here](http://stackoverflow.com/questions/1589799/how-to-force-a-page-to-reload-if-all-what-was-changed-in-url-is-hash/) , this will work for you. – Jashwant May 17 '12 at 18:46
  • Have you looked into the link ? – Jashwant May 19 '12 at 04:40