scrollTop reset at the top everytime
<p>I got the following code :</p>

<pre><code>&lt;script type="text/javascript"&gt;
    jQuery(document).ready(function(){
    var Opened = false;
    jQuery('.expend-schedule').click(function(e){
        // On empêche l'action
        e.preventDefault();

        // Variable
        var DataType = jQuery(this).attr('data-type');

        // On va fermer toutes les tables
        jQuery('.schedule').each(function(){
            // On va fermer uniquement si ouverte
            if( jQuery(this).css('display') != 'none' &amp;&amp; jQuery(this).attr('data-type') != DataType ){
                // On ferme
                jQuery(this).fadeOut( 500, function(){
                    // Est-ce que l'animation et l'ouverture s'est produite déjà ?
                    if(Opened === false){
                        var TableElement = jQuery('.schedule[data-type="'+DataType+'"]');
                        // On ouvre et on s'y déplace de façon automatique
                        TableElement.fadeIn(TableElement.height() * 0.47, function(){
                            jQuery('html, body').animate({  
                                scrollTop: TableElement.offset().top - 50
                            }, 'slow');
                        });

                        // On dit que c'est ouvert, afin d'empêcher l'ouverture à de multiples reprises
                        // si'il y a eu un bug
                        Opened = true;
                    }
                });
            }
        });

        // On reset
        Opened = false;
    });
&lt;/script&gt;
</code></pre>

<p>and this is an example of how my page is :</p>

<pre><code>&lt;h4 class="sep_bg"&gt;&lt;a class="expend-schedule" data-type="week" href="#"&gt;Monday to Friday&lt;/a&gt;&lt;/h4&gt;
&lt;table class="schedule table table-condensed" data-type="week"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th style="width: 60px;"&gt;Hour&lt;/th&gt;
            &lt;th style="width: 710px;"&gt;Transit&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;04h&lt;/td&gt;
            &lt;td&gt;04h15, 04h27, 04h39, 04h59&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;h4 class="sep_bg"&gt;&lt;a class="expend-schedule" data-type="saturday" href="#"&gt;Saturday&lt;/a&gt;&lt;/h4&gt;
&lt;table class="schedule table table-condensed" data-type="saturday"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th style="width: 60px;"&gt;Hour&lt;/th&gt;
            &lt;th style="width: 710px;"&gt;Transit&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;04h&lt;/td&gt;
            &lt;td&gt;04h15, 04h27, 04h39, 04h59&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>So my problem is :</p>

<p>Everytime I click somewhere where the class <code>expend-schedule</code> is, this should move from the current scroll position to the element position. This is working except that, when I click, it goes right to the top of the page, then it move to the element position.</p>

<p>Any ideas? Thanks.</p>
