Jump To #selected Div Before jQuery Is Executed

JavaScript
1

I’m trying to scroll/jmp to the #selected div on the current page before it runs the javascript below:

var hash = window.location.hash.substr(1);
    var href = $('.workimg a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #selected';
            $('#selected').load(toLoad)
        }                                           
    });

    $('.workimg a').click(function(e){
    e.preventDefault();
                                 
        var toLoad = $(this).attr('href')+' #selected';
        $('#selected').slideUp(1200,loadContent);
        $('#load').remove();
        $('#work').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href');
        function loadContent() {
            $('#selected').load(toLoad,'',showNewContent)
        }
        function showNewContent() {
            $('#selected').css("opacity","0");
            $('#selected').delay(50).animate({
    opacity: 1,
    height: 'toggle'
  }, 1200, function() {
    hideLoader();
  });
        }
        function hideLoader() {
            $('#load').hide();
        }
       
    });

How difficult would it be to do this?

2

The super easy way would be to use the jQuery scrollTo plugin. It will enable you to perform the scroll and add a callback function to execute when the scroll is complete.

The (only slightly) harder way would be to first wrap the code you want to execute in a function, then call window.scrollTo() followed by your function call
e.g.:

function something() {
	console.log("some code");
}
$(document).ready(function(){
	window.scrollTo(0,$("#selected").position().top);
	something();
});

Of course using a plugin for such simple functionality is a little overkill :wink: