JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/11871151/scrolltop-not-working-after-slidetoggle

HTML

<script src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"></script>
<div id="page">
    
<div id="leftside">
<div id="inner_left">

    
    <div id="content">
    
    <h1>Fear of a Bot Planet</h1>
<p>Yes, except the Dave Matthews Band doesn't rock. Doomsday device? Ah, now the ball's in Farnsworth's court! Bender, hurry! This fuel's expensive! Also, we're dying! Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually!</p>
<h2>Insane in the Mainframe</h2>
<p>I daresay that Fry has discovered the smelliest object in the known universe! Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? But existing is basically all I do!</p>
<ul>
<li>No, just a regular mistake.</li>
<li>I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</li>
<li>You're going back for the Countess, aren't you?</li>
<li>I love this planet! I've got wealth, fame, and access to the depths of sleaze that those things bring.</li>
</ul>

<div class="expandable">
<h3>The Prisoner of Benda</h3>
<div class="expansion_text">
<p>Bender, I didn't know you liked cooking. That's so cute. The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. This is the worst part. The calm before the battle. Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually!</p>  
</div></div>
<div class="expandable">
<h3>Where the Buggalo Roam</h3>
<div class="expansion_text">
<p>Are you crazy? I can't swallow that. Bender, quit destroying the universe! Belligerent and numerous. Can I use the gun?</p>
<ol>
<li>Can we have Bender Burgers again?</li>
<li>I was all of history's great robot actors - Acting Unit 0.8; Thespomat; David Duchovny!</li>
<li>I videotape every customer that comes in here, so that I may blackmail them later.</li>
</ol>
</div></div>

   ...

CSS

body, html {
    /*font: normal 18px "Lucida Sans Unicode", "Lucida Grande", sans-serif; */
    font: normal 14pt 'Rokkitt', serif;
text-align:justify;
height: 100%;
}

img { max-width: 100% }

#page{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: white;
}

#leftside{
    float: left;
    height: 100%;
    width: 60%;
}

/* The inner containers are incase we find the full layout too spread out at 1920x1080+; we can centralise it using max-width */

#inner_left{
    float: right;
    width: 100%;
    height: 100%;
}
    #header, #content, #footer{
        margin: 0 4em;
    }
    #header{
        background-color: white;
    }
        .header_img{
            width: 100%;
        }
    #content h1{
        font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
        font-size: 2.2em;
        color: #2956B2;
        text-decoration: none;
        font-weight: normal;
    }
    #content h2{
        color: #7DBD00;
        text-align: left;
    }
    #content .expansion_header{display: block}

    #content h3{
        padding: 0.1em 1em;
        color: #2956B2;
        -moz-border-radius: 8em 1em 8em 1em;
        border-radius: 8em 1em 8em 1em;
        border: 2px solid #2956B2;
        display: inline;
    }
        
    #footer{
        background-color: grey;

    }

#rightside{
    position: fixed;
    right: 0em;
    height: 100%;
    width: 40%;
    background-color: green;
    z-index:0;
}
    
#inner_right{
    float: left;
    width: 100%;
    height: 100%;
    background-color: #2956B2;
}
    #navbar_container{
        width: 100%;
        font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
        font-size: 2.2em;
        text-align: left;
    }
    ul#navbar{
        list-style: none;
        margin: 0;
        padding: 0;
        
    }
        li.nav_option{
            
        }
        ul#navbar li.nav_option a{
  ...

JavaScript

$(document).ready(function() {
    
    //br is the most efficient way to get desired effect with inline h3's
   $("<br/>").insertBefore("h3");
   
   //collapse all expandable sections on page load
    $(".expansion_text").css('display','none');
    
    $("h3").click( function(){
        $(this).siblings(".expansion_text").slideToggle( "slow");
    });
    $.resize.delay = 10;
    $('.expandable').resize(function(){
        var page = $('#page');
        page.scrollTop(page.scrollTop() + $(this).children('h3:first').position().top);
        //console.log($(window).scrollTop());
    });
});