scrollTop reset at the top everytime

Question

I got the following code :

<script type="text/javascript">
    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' && 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;
    });
</script>

and this is an example of how my page is :

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

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

So my problem is :

Everytime I click somewhere where the class expend-schedule 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.

Any ideas? Thanks.

Why is there a comma in your jQuery selector `jQuery(html, body)`? You're applying the animate to both elements, not just `body`. — Andre, Jun 20 '12 at 14:54
@Andre Because of this : http://stackoverflow.com/a/2234749/1009061 But anyway, `html, body` or `body` doesn't solve the problem. — David Bélanger, Jun 20 '12 at 14:59

score 0 · Answer 1 · answered Jun 20 '12 at 15:05

0

It seems that the browser first respects the <a href="#"> link, taking it to the top of the page, and then performs your animation.

I would change it to <a href="javascript:void(0);">Text</a> to fix the issue.

answered Jun 20 '12 at 15:05

Andre

3,150
23
23

Good try. But no. It doesn't work either. I also use `e.preventDefault()` to intercept and cancel the event. – David Bélanger Jun 20 '12 at 15:08
@Huangism You should always use `$(element).click(function(e){ e.preventDefault(); });` – David Bélanger Jun 20 '12 at 15:09
@DavidBélanger right the preventDefault... ok see my answer, maybe it will help – Huangism Jun 20 '12 at 15:24

score 0 · Accepted Answer · answered Jun 20 '12 at 15:23

0

I think it is not going to the top, I tried to test it with the code you provided (missing some brackets). Anyway, I think the fadeout is causing the perception of things moving to the top then coming down, since your scrollTop is in the animation complete function. If you take out the fade then it works properly, although for me it only worked once the next clicks did not do anything.

So test it without the fade and see if it still doing what you think it is doing.

answered Jun 20 '12 at 15:23

Huangism

16,278
7
48
74

You are right. I wanted to use `slideUp` and `slideDown` function, but it does no effect with the table. – David Bélanger Jun 20 '12 at 15:29
@DavidBélanger put a div around the table and slide div, or animate the height of div but either way what you have works it's just the fade creates a visual perception of it not working properly – Huangism Jun 20 '12 at 15:34

scrollTop reset at the top everytime

2 Answers2