Help with callback functions

[FrickenTrevor]

Hey there, I am using the jQuery plugin jpreloader.

During the loadComplete function, the splash screen fades out while the site fades in. Here is the code for that function.

	//triggered when all images are loaded
	var loadComplete = function() {
		$(jOverlay).fadeOut(800, function() {	
			$(jOverlay).remove();
			onComplete();	//callback function
		});
	}

However I would like the page to be scrolled/moved to the top before the site fades in. I tried using the callback function, however the code breaks when I do. This is what I
attempted:

	//triggered when all images are loaded
	var loadComplete = function() {
		$(jOverlay).fadeOut(800, function() {
			
			$(jOverlay).remove();

			onComplete('html, body').animate({scrollTop : 0},200);	//callback function
		});
	}

[jscheuer1]

OK, hopefully I can explain what's happening so you get it. When we do:

	//triggered when all images are loaded
	var loadComplete = function() {
		$(jOverlay).fadeOut(800, function() {	
			$(jOverlay).remove();
			onComplete();	//callback function
		});
	}

That means that when the loadComplete function is called this happens:

The element(s) (if any) represented by $(jOverlay) fade out over a period of 800 milliseconds. Once that's done, this anonymous function runs:

function() {	
			$(jOverlay).remove();
			onComplete();	//callback function
		}

The first line of which removes the element(s) (if any) represented by $(jOverlay) and their children (again, if any), while at the time eliminating any events associated with them (again, if any).

The next line simply runs another function by the name of 'onComplete'. If such a function exist within the scope accessible to this code, it will run, otherwise, nothing will happen.

That's all well and good, but then when you do/add to it like so:

onComplete('html, body').animate({scrollTop : 0},200);	//callback function

That's basically jQuery/javascript jibberish and essentially means nothing, and probably throws an error. But it may not. In either case it doesn't do anything.

Now there could be other issues - like the syntax itself might be off (but it looks good, I just tested it in Chrome), if that's OK like it looks to be, what you can do is this (simplest solution, there are others):

	//triggered when all images are loaded
	var loadComplete = function() {
		$(jOverlay).fadeOut(800, function() {	
			$(jOverlay).remove();
			$('html, body').animate({scrollTop : 0},200);
		});
	}

Feel free to ask any questions, but if there are still problems after editing the code as I suggest, and refreshing the page and/or clearing the cache, it would help me a lot to help you if you could provide a link to the problematic page, so I can check it out.

[FrickenTrevor]

The question I have is how can I edit the code so the scroll bar goes back up to the page before the overlay fades out. Could the code

$('html, body').animate({scrollTop : 0},0);

be called before

$(jOverlay).fadeOut(800, function() {	
			$(jOverlay).remove();
		});

but with a pause between the two? At least enough time for the page to be scrolled up before the page fades in.

[jscheuer1]

This should do that:

	//triggered when all images are loaded
	var loadComplete = function() {
		$('html, body').scrollTop(0);
		$(jOverlay).fadeOut(800, function() {	
			$(jOverlay).remove();
		});
	}

[FrickenTrevor]

Thanks, I figured it would be something that simple!