emptying a div

seems to cause page to scroll up, when there is not enough below. can fix it by just keeping the height.

by hrabinowitz

HTML

<div id="div1">
    this is a div at the top.
</div>
<div id="div2">
    big div
</div>
<div id="clicker">
    click to empty text
</div>
<div id="div3">
    lots of lines
StatReportEntry {locationId=97, timestamp=1383343200000, occupancy=1.26, count=5, speedMed=78.0, speedAvg=0.0, speedHist={}, lengthHist={}}
StatReportEntry {locationId=96, timestamp=1383343260000, occupancy=4.66, count=17, speedMed=71.0, speedAvg=0.0, speedHist={}, lengthHist={}}
StatReportEntry {locationId=97, timestamp=1383343260000, occupancy=0.5, count=2, speedMed=86.0, speedAvg=0.0, speedHist={}, lengthHist={}}
StatReportEntry {locationId=96, timestamp=1383343320000, occupancy=3.27, count=11, speedMed=74.0, speedAvg=0.0, speedHist={}, lengthHist={}}
StatReportEntry {locationId=97, timestamp=1383343320000, occupancy=0.71, count=4, speedMed=0.0, speedAvg=0.0, speedHist={}, lengthHist={}}
StatReportEntry {locationId=96, timestamp=1383343380000, occupancy=2.36, count=8, speedMed=74.0, speedAvg=0.0, speedHist={}, lengthHist={}}
StatReportEntry {locationId=97, timestamp=1383343380000, occupancy=1.24, count=4, speedMed=75.0, speedAvg=0.0, speedHist={}, lengthHist={}}
StatReportEntry {locationId=96, timestamp=1383343440000, occupancy=3.85, count=14, speedMed=71.0, speedAvg=0.0, speedHist={}, lengthHist={}}
StatReportEntry {locationId=97, timestamp=1383343440000, occupancy=1.17, count=5, speedMed=75.0, speedAvg=0.0, speedHist={}, lengthHist={}}
StatReportEntry {locationId=96, timestamp=1383343500000, occupancy=3.23, count=13, speedMed=78.0, speedAvg=0.0, speedHist={}, lengthHist={}}
StatReportEntry {locationId=97, timestamp=1383343500000, occupancy=1.05, count=4, speedMed=91.0, speedAvg=0.0, speedHist={}, lengthHist={}}
</div>

CSS

#div2 {
    height: 400px;
    background: beige;
}

#div3 {
    background: gray;
}

JavaScript

$(function() {
    $('#clicker').click(function() {
        // trick is to set height explicitly before emptying!
        $('#div3').height($('#div3').height()).empty();
    });
    
    // scrollTo
    $('html, body').animate({
        scrollTop: ($('#clicker').offset().top)
    },500);
});