I have some JavaScript that can appear on many different pages. Sometimes those pages have been accessed via a URL containing an anchor reference (#ment-100, for instance). In those cases I want the JavaScript to delay executing until after the window has jumped. Right now I'm just using a delay but that's pretty hackish and obviously doesn't work in all cases. I can't seem to find any sort of DOM event that corresponds to the window "jump".

Aside from the simple delay, the only solution I've e up with is to have the JS look for the anchor in the URL and, if it finds one, watch for changes in scrollTop. But that seems buggy, and I'm not 100% sure that my script will always get fired before the scrolling happens so then it would only run if the user manually scrolled the page. Anyhow, I don't really like the solution and would prefer something more event driven. Any suggestions?

Edit to clarify:

I'm not trying to detect a hash change. Take the following example:

1. Page index.php contains a link to post.php#ment-1
2. User clicks the link to post.php#ment-1
3. post.php#ment-1 loads
4. $(document).ready fires
5. Not long later the browser scrolls down to #ment-1

I'm trying to reliably detect when step 5 happens.

I have some JavaScript that can appear on many different pages. Sometimes those pages have been accessed via a URL containing an anchor reference (#ment-100, for instance). In those cases I want the JavaScript to delay executing until after the window has jumped. Right now I'm just using a delay but that's pretty hackish and obviously doesn't work in all cases. I can't seem to find any sort of DOM event that corresponds to the window "jump".

Aside from the simple delay, the only solution I've e up with is to have the JS look for the anchor in the URL and, if it finds one, watch for changes in scrollTop. But that seems buggy, and I'm not 100% sure that my script will always get fired before the scrolling happens so then it would only run if the user manually scrolled the page. Anyhow, I don't really like the solution and would prefer something more event driven. Any suggestions?

Edit to clarify:

I'm not trying to detect a hash change. Take the following example:

1. Page index.php contains a link to post.php#ment-1
2. User clicks the link to post.php#ment-1
3. post.php#ment-1 loads
4. $(document).ready fires
5. Not long later the browser scrolls down to #ment-1

I'm trying to reliably detect when step 5 happens.

• javascript
• jquery
• dom
• jquery-events

• $(document).ready() fires too early? – Peter Ajtai Commented Aug 24, 2010 at 22:38

3 Answers 3

You can check window.onhashchange in modern browsers. If you want cross patible, check out http://benalman./projects/jquery-hashchange-plugin/

This page has more info on window.onhashchange as well.

EDIT: You basically replace all anchor names with a similar linking convention, and then use .scrollTo to handle the scrolling:

$(document).ready(function () {
  // replace # with #_ in all links containing #
  $('a[href*=#]').each(function () {
      $(this).attr('href', $(this).attr('href').replace('#', '#_'));
  });

  // scrollTo if #_ found
  hashname = window.location.hash.replace('#_', '');
  // find element to scroll to (<a name=""> or anything with particular id)
  elem = $('a[name="' + hashname + '"],#' + hashname);

  if(elem) {
       $(document).scrollTo(elem, 800,{onAfter:function(){
        //put after scroll code here }});
  }
});

See jQuery: Scroll to anchor when calling URL, replace browsers behaviour for more info.

Seems like you could use window.onscroll. I tested this code just now:

<a name="end" />
<script type="text/javascript">
    window.onscroll = function (e) {
        alert("scrolled");
}
</script>

which seems to work.

Edit: Hm, it doesn't work in IE8. It works in both Firefox and Chrome though.

Edit: jQuery has a .scroll() handler, but it fires before scrolling on IE and doesn't seem to work for Chrome or Firefox.

To detect when the element appears on the screen, use the appear plugin:

$('#ment-1').appear(function() {
  $(this).text('scrolled');
});