Question

I can’t figure this out. i am calling a function that loads based on:

var option = self.document.location.hash.substring(1);

if(option != ''){
    subshow(option);
}

function subshow(this_id){

    if($('#'+this_id).hasClass('selected') == false){
        $('.page').wrap('<div class="click_off" onclick="javascript:deselect_block(event);" />');
        $('#'+this_id).children().show();
        $('#'+this_id).addClass('top');
        $('#'+this_id).addClass('selected');
        $(window).scrollTop();
}

everything works fine except for the the scrollTop() call which fires before the jQuery executes. Once scrollTop() does execute, the page jumps to the element #this_id Any ideas why? Chrome 22.

I’ve also tried document.body.scrollTop = 0; , window.scrollTo(0,0) , and

$('html').animate({scrollTop:0}, 'slow');//IE, FF
$('body').animate({scrollTop:0}, 'slow');

Answer 1

If this isn’t wrapped in a $(document).ready() or similar the function will fire before the DOM has loaded, so all of the DOM related script will be skipped over and the $(window).scrollTop() event will fire.

If you were to wrap the whole lot up and wait for the DOM to load it should give you the desired functionality