Scrolling to correct area of jquery animation()

JavaScript
1

I’m developing my own Jquery module for the Team page on a website. It should work in the obvious way … when you click the image of a team member, a “detail” div animates open to reveal additional team member content. Everything seems to be working fine except when the animation occurs, it occurs down beneath the viewable area of the page.

I gather I need to do some jquery scrolling here. I did have it working that way before using:

$(“html,body”).animate({scrollTop: $(“.expand-row-1”).offset().top}, 500);

However the whole deal has gotten much more complicated since … there are now functions as callbacks nested in other functions which, to be honest, is messing with my head …

What I’m trying to do is get the page to scroll to it’s content after it is faded onto the screen. So what I need to do is chain one more action to scroll into this mess somehow:

$(“.team-member-1-block”).fadeOut(0 , function(){ $(“.expand-row-1”).animate({height:finalExpandRowHeight , padding:‘2em’}, 500, function(){ $(“.team-member-1-block”).fadeIn(500); }); } );

I tried it as a callback for the fadeIn() function so it would start after the fadeIn() and it didn’t work … I was using:

$(“.team-member-1-block”).fadeOut(0 , function(){ $(“.expand-row-1”).animate({height:finalExpandRowHeight , padding:‘2em’}, 500, function(){ $(“.team-member-1-block”).fadeIn(500, function(){ $(“html,body”).animate({scrollTop: $(“.expand-row-1”).offset().top}, 500); } ); }); } );

Any idea how I can make my page scroll to appropriate content? I’m sure it’s just me not knowing where to nest this code.

dev link: http://devonline.wpengine.com//wp-content/uploads/test/team-portfolio-3.html

Thanks

2

Got it sorted. Correct code block is below. No nesting need on the scrollTop()

/* row 1 scripting /
$(“a.team-member-1”).click(function(e){
e.preventDefault();
/ collapse other rows if open /
$(“.expand-row-2”).css({height:‘0px’ , padding:‘0em’});
/ click settings for this module /
$(“.team-member-2-block”).css(“display”,“none”);
$(“.team-member-3-block”).css(“display”,“none”);
$(“.team-member-4-block”).css(“display”,“none”);
$(“.team-member-5-block”).css(“display”,“none”);
/ fadeOut() module then use callback to fadeIn() /
$(“.team-member-1-block”).fadeOut(0 , function(){ $(“.expand-row-1”).animate({height:finalExpandRowHeight , padding:‘2em’}, 500, function(){ $(“.team-member-1-block”).fadeIn(500); }); } );
/ scroll to area in question */
$(“html,body”).animate({scrollTop: $(“.expand-row-1”).offset().top}, 1000);
});