Question

我收到了以下代码：

<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>

这是我的网页的示例：

<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>

所以我的问题是：

每当我点击类expend-schedule所在的某个地方时，这应该从当前滚动位置移动到元素位置。这是有效的，但是当我点击它时，它会一直到页面顶部，然后移动到元素位置。

有什么想法吗？感谢。

Answer 1

浏览器似乎首先尊重<a href="#">链接，将其置于页面顶部，然后执行动画。

我会将其更改为<a href="javascript:void(0);">Text</a>以解决问题。

Answer 2

我认为它没有达到顶峰，我试图用你提供的代码测试它（缺少一些括号）。无论如何，我认为淡出是由于你的scrollTop处于动画完成功能中而导致事物移动到顶部然后降低的感觉。如果你取出淡入淡出然后它可以正常工作，虽然对我来说只有在下次点击没有做任何事情时才能工作。

因此，在没有淡入淡出的情况下进行测试，看看它是否仍然按照您的想法行事。

scrollTop每次都在顶部重置

2 个答案: