How to execute scrollTop after a slideUp

Question

I'm having trouble with a post feed.

Basically, it's a list of banners and titles, with content divs hidden in the CSS. When you click on a title, the relevant content div slides down. At the same time, any other open divs slide up, so that you can only view one article at a time. The page then scrollTops to the top of the relevant banner div.

Here's a jsFiddle: http://jsfiddle.net/JGuilford/VzVCD/

The HTML:

<!-- Content area -->
<div id="content" class="site-content" role="main">
<!-- First Post -->
<!-- Header -->
<article id="post1" class="standard post">
    <header class="entry-header">
        <div class="entry-thumbnail">
            <div class="entry-thumbnail-text">
                 <h1 class="entry-title-thumbnail-active">
            Post1
         </h1>

            </div>
            <!-- .entry-thumbnail-text -->
            <img width="750" height="270" src="http://twentythirteendemo.wordpress.com/wp-content/themes/pub/twentythirteen/images/headers/circle.png" alt="banner img">
        </div>
        <!-- .entry-thumbnail -->
    </header>
    <!-- .entry-header -->
    <!-- Article Content -->
    <div class="entry-content-thumbnail" id="content-1">
        <p>See the child. He is pale and thin, he wears a thin and ragged linen shirt. He stokes the scullery fire. Outside lie dark turned fields with rags of snow and darker woods beyond that harbour yet a few last wolves. His folks are known for hewers of wood and drawers of water but in truth his father has been a schoolmaster. He lies in drink, he quotes from poets whose names are now lost. The boy crouches by the fire and watches him.</p>
        <p>Night of your birth. Thirty-three. The Leonids they were called. God how the stars did fall. I looked for blackness, the holes in the heavens. The Dipper stove.</p>
        <p>The mother dead these fourteen years did incubate in her own bosom the creature who would carry her off. The father never speaks her name, the child does not know it. He has a sister in this world that he will not see again. He watches, pale and unwashed. He can neither read nor write and in him broods already a taste for mindless violence. All history present in that visage, the child the father of the man.</p>
        <p>At fourteen he runs away. He will not see again the freezing kitchenhouse in the predawn dark. The firewood, the washpots. He wanders west as far as Memphis, a solitary migrant upon that flat and pastoral landscape. Blacks in the fields, lank and stooped, their fingers spiderlike among the bolls of cotton. A shadowed agony in the garden. Against the sun’s declining figures moving in the slower dusk across a paper skyline. A lone dark husbandman pursuing mule and harrow down the rainblown bottomland toward night.</p>
    </div>
</article>
<!-- Second Post -->
<!-- Header -->
<article id="post2" class="standard post">
    <header class="entry-header">
        <div class="entry-thumbnail">
            <div class="entry-thumbnail-text">
                 <h1 class="entry-title-thumbnail-active">
            Post2
         </h1>

            </div>
            <!-- .entry-thumbnail-text -->
            <img width="750" height="270" src="http://twentythirteendemo.wordpress.com/wp-content/themes/pub/twentythirteen/images/headers/circle.png" alt="banner img">
        </div>
        <!-- .entry-thumbnail -->
    </header>
    <!-- .entry-header -->
    <!-- Article Content -->
    <div class="entry-content-thumbnail" id="content-2">
        <p>See the child. He is pale and thin, he wears a thin and ragged linen shirt. He stokes the scullery fire. Outside lie dark turned fields with rags of snow and darker woods beyond that harbour yet a few last wolves. His folks are known for hewers of wood and drawers of water but in truth his father has been a schoolmaster. He lies in drink, he quotes from poets whose names are now lost. The boy crouches by the fire and watches him.</p>
        <p>Night of your birth. Thirty-three. The Leonids they were called. God how the stars did fall. I looked for blackness, the holes in the heavens. The Dipper stove.</p>
        <p>The mother dead these fourteen years did incubate in her own bosom the creature who would carry her off. The father never speaks her name, the child does not know it. He has a sister in this world that he will not see again. He watches, pale and unwashed. He can neither read nor write and in him broods already a taste for mindless violence. All history present in that visage, the child the father of the man.</p>
        <p>At fourteen he runs away. He will not see again the freezing kitchenhouse in the predawn dark. The firewood, the washpots. He wanders west as far as Memphis, a solitary migrant upon that flat and pastoral landscape. Blacks in the fields, lank and stooped, their fingers spiderlike among the bolls of cotton. A shadowed agony in the garden. Against the sun’s declining figures moving in the slower dusk across a paper skyline. A lone dark husbandman pursuing mule and harrow down the rainblown bottomland toward night.</p>
    </div>
</article>
<!-- Third Post -->
<!-- Header -->
<article id="post3" class="standard post">
    <header class="entry-header">
        <div class="entry-thumbnail">
            <div class="entry-thumbnail-text">
                 <h1 class="entry-title-thumbnail-active">
            Post3
         </h1>

            </div>
            <!-- .entry-thumbnail-text -->
            <img width="750" height="270" src="http://twentythirteendemo.wordpress.com/wp-content/themes/pub/twentythirteen/images/headers/circle.png" alt="banner img">
        </div>
        <!-- .entry-thumbnail -->
    </header>
    <!-- .entry-header -->
    <!-- Article Content -->
    <div class="entry-content-thumbnail" id="content-3">
        <p>See the child. He is pale and thin, he wears a thin and ragged linen shirt. He stokes the scullery fire. Outside lie dark turned fields with rags of snow and darker woods beyond that harbour yet a few last wolves. His folks are known for hewers of wood and drawers of water but in truth his father has been a schoolmaster. He lies in drink, he quotes from poets whose names are now lost. The boy crouches by the fire and watches him.</p>
        <p>Night of your birth. Thirty-three. The Leonids they were called. God how the stars did fall. I looked for blackness, the holes in the heavens. The Dipper stove.</p>
        <p>The mother dead these fourteen years did incubate in her own bosom the creature who would carry her off. The father never speaks her name, the child does not know it. He has a sister in this world that he will not see again. He watches, pale and unwashed. He can neither read nor write and in him broods already a taste for mindless violence. All history present in that visage, the child the father of the man.</p>
        <p>At fourteen he runs away. He will not see again the freezing kitchenhouse in the predawn dark. The firewood, the washpots. He wanders west as far as Memphis, a solitary migrant upon that flat and pastoral landscape. Blacks in the fields, lank and stooped, their fingers spiderlike among the bolls of cotton. A shadowed agony in the garden. Against the sun’s declining figures moving in the slower dusk across a paper skyline. A lone dark husbandman pursuing mule and harrow down the rainblown bottomland toward night.</p>
    </div>
</article>

The JQuery:

$(document).ready(function () {
    $(".entry-title-thumbnail-active").click(function () {
        $(this).closest('.site-content').find('.entry-content-thumbnail').not($(this).closest('article').find('.entry-content-thumbnail')).slideUp('slow');
        $(this).closest('article').find('.entry-content-thumbnail').slideToggle(
            'slow', 'swing', $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 'slow'));
        return false;
    });
});

The problem is that, if an article is already open above the one the user is clicking open, then when it closes, the clicked title scrolls up and out of view. Basically, I can't figure out how to get scrollTop to use the final position of the clicked .entry-title-thumbnail-active rather than its initial position. To see what I mean, open the jsFiddle and click on Post 2, then Post 3. The article for Post 3 will expand, the article for Post 2 will collapse, but the window will try to scroll to the title for Post 3's initial position, rather than its position after Post 2 collapses.

Does anyone know how to fix this?

Answer 1

The complete method on .slideToggle() is a function. See the slideToggle docs

So it should be:

$(".entry-title-thumbnail-active").click(function () {
    $(this).closest('.site-content').find('.entry-content-thumbnail').not($(this).closest('article').find('.entry-content-thumbnail')).slideUp('slow');

    $(this).closest('article').find('.entry-content-thumbnail').slideToggle(
        'slow', function () {
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 'slow')
    });
    return false;
});

You also don't need to set 'swing' because it's already the default applied easing.

Check this jsfiddle.