jQuery - slideDown slideUp - fadeIn fadeOut - ScrollTo -

jQuery - slideDown slideUp - fadeIn fadeOut - ScrollTo -

i want seek , accomplish effect.

so have website 100% height. in footer have 2 buttons, contact , info. when click 1 of buttons page should scroll downwards first fade in corresponding content. when other button clicked want fade content out fade new content in, without scroll.

then want have close button in content fades in, 1 time clicked fade out content scroll up.

i hope makes sense.

here illustration of mean http://www.10yearsintype.com/#!stories click on 1 of designers or bring together our mailing list.

this pathetic effort http://jsfiddle.net/ricoshift/lumr7/

function toggleslider() { if (jquery("#panelthatslides").is(":visible")) { jquery('html, body').animate({ scrolltop: 300 }, 600), jquery("#contentthatfades").animate( { opacity: "0" }, 600, function(){ jquery("#panelthatslides").slideup(); } ); } else { jquery('html, body').animate({ scrolltop: 300 }, 600), jquery("#panelthatslides").slidedown(600, function(){ jquery("#contentthatfades").animate( { opacity: "1" }, 600 ); }); }

}

i'd love help nail this.

jquery