Question

<script>
    $(document).ready(function() {
        $('.start').click(function() {
            $('.startHere').fadeToggle("fast");
        });
    });
    $(document).ready(function() {
        $(".toggle").click(function() {
            $('.childtoggle').not($(this).find(".childtoggle")).hide(500);
            $(this).find(".childtoggle").slideToggle(500);
        });

        $(".childtoggle").click(function(event) {
            event.stopPropagation();
        });

        $(".gonext").click(function(e) {
            e.stopPropagation();
            if ($(this).parent().parent().next(".toggle").html() != undefined)
                $(this).parent().parent().next(".toggle").trigger("click");
            else
                $(".toggle").first().trigger("click");

        });
    });
</script>

该代码做了一件简单的事情。它让我点击不同的div，然后关闭并打开下一个div。所以我从来没有开过多个div。

但我想做的只是确保每次切换新的div时，屏幕会移动到div顶部。有时这些div的高度比屏幕高，然后滚动位于div的一半。

Answer 1

点击活动后尝试使用https://api.jquery.com/scrollTop/。

类似的东西：

$('html, body').animate({scrollTop:$('#YOUR_DIV_ID').position().top}, 'slow');

Answer 2

.slideToggle方法启动一个动画，它会改变<div>的高度，因此您无法在完成之前设置滚动位置。试试这个：

function scrollToDiv() {
    $('#outerWrapper').scrollTop($(this).position().top);
}

$yourDiv.slideToggle(500, scrollToDiv);

应用于您的代码（通过一些猜测），这将是：

$('.toggle').click(function() {
    var $current = $(this).find('.childtoggle');

    $('.childtoggle').not($current).hide(500, function() {

        // After hiding the children show the current
        $current.slideToggle(500, function() {

            // After showing the current scroll to it
            $('body').scrollTop($current.position().top);
        });
    });
});

然而，完成所有动画需要大约一秒钟，这可能对用户有点感觉。更好的选择可能是在页面加载后找出每个折叠position().top的{{1}}，然后使用该缓存值滚动到。{/ p>

jQuery切换并移至顶部

2 个答案: