Question

Ok, so I have a whole page hide / fadeIn effect happening with jQuery. Everything was working smoothly until I realized that the delay() + fadeIn() is causing my

<a href="http://example.com/my_page/#my_ID">Hashtag Links</a>

to load with the scroll position at the top rather than where that #my_ID is on the page.

I know this is related to the whole page delay() // fadeIn() effects. It’s not an option for me to ditch these effects, any way to circumvent this problem?

You can view the site (in production) at

http://valeriaentertainment.com.s66112.gridserver.com/

EDIT

This is the relevant jQuery code:

// #curtain DIV begins hidden then fades in after #bgImage (curtain) is loaded - prevents "ribbon" loading effect in Chrome

var allDone = false;
var url = $('.bgImage').attr('src');
var img = new Image();
img.onload = function() {
  if (!allDone) {
    $('#curtain').delay(1500).fadeIn(1000);
    allDone = true;
  }
};
setTimeout(img.onload, 2000); // show the hidden stuff after 5 seconds, image or no image
img.src = url;

Answer 1

At first glance at a gallery page, it looks like the entire page content is initially hidden. When the browser is loading the page, it will start looking for the element identified in the URL fragment; that element will be hidden or not visible and hence it won’t have any useful position to scroll to and nothing happens to the scroll position.

I think the easiest thing to do would be to handle the scrolling yourself in the .fadeIn() callback:

• Grab the fragment out of window.location.hash.
• Find out where it is on the page with something like:
  var y = $('#' + window.location.hash).offset().top;
• Then scroll the page to that position:
  $('html,body').attr('scrollTop', y);

You could even animate the scrollTop change if you wanted to get fancy.

Here’s an example to get you started:

$('#curtain').delay(1500).fadeIn(1000, function() {
    // Bail out if there is no hash.
    if(!window.location.hash)
        return;

    // Convert the hash to an element and bail out
    // if there is no such element.
    var $e = $(window.location.hash);
    if($e.length < 1)
        return;

    // And, finally, do what we're here to do.
    $('html,body').attr('scrollTop', $e.offset().top);
});

If you wanted to animate the scrolling then you’d change the $('html,body').attr(...) part to something like this:

$('html,body').animate({ scrollTop: '+=' + $e.offset().top }, 'fast');