jQuery scroll down to new dynamic element, then slideDown to see the effect of new element

jQuery scroll down to new dynamic element, then slideDown to see the
effect of new element

Using jQuery 1.10. I have the following:
$('html, body').animate({
scrollTop: $("#copyright").offset().top
}, 500);
$("<%= j(render 'shop') %>").hide().appendTo($("#shops")).slideDown("fast");
What it does is scroll down to the end of the page, then the new element
is appended. But while it's scrolling, the new element is already
slideDown.
Questions:
I want the user to be scrolled down to the bottom of the page, then see
the new element slideDown to create a UX feeling that new element is
created.
Bonus: You notice I scroll to #copyright which is at the footer instead.
Actually I want it to scroll to the exact position where the new element
will be appended (usually there are many shops, it will be appended after
the last shop.
Note: These two lines of code are working, just need to tweak a little.
Thanks.