Question

所以我正在构建一个接口，我的div上有一个jQuery，使它们的大小增加然后使我的wrap div滚动，以便点击的div显示在屏幕的顶部。

我的问题是scrollTop动作似乎记录了最后一个div被点击的最高值，因此如果最后点击的div的最高值不是0，则在那里停止滚动。

这是我的剧本：

$(".blow").click(function () {

    if ($(this).attr("data-blow") == "false") {
        $(this).animate({
            left: '0px',
            height: '100%',
            opacity: 0.95
        }, 'slow', function () {
            $('#wrap').animate({
                scrollTop: $(this).offset().top
            }, 'slow');
            $(this).removeClass('blow')
            $(this).addClass('overflow')
            $(this).attr("data-blow", "true")
        });
    } else {
        $(this).animate({
            left: '-75%',
            height: '24%',
            opacity: 0.6
        }, 'slow')
        $(this).removeClass('overflow')
        $(this).addClass('blow')
        $(this).attr("data-blow", "false")
    }
});

如果你想看看它现在的表现如何，这就是链接：http://www.rlacorne.com/blow

感谢有关那个的提示！

Answer 1

.offset().top返回文档顶部与元素本身（包括滚动像素）之间的像素数。这就解释了为什么如果用户还没有滚动页面，你的元素会正确展开和滚动，但是当做滚动时，它不会按预期工作。

你将很难像这样的动画滚动使用绝对定位的包装依赖于它自己的偏移量。我建议完全放弃包装元素。我还建议动画width属性而不是left，因为你的动画对它的位置很敏感，你实际上只想展开它。

Here is my (dumbed down) take on jsfiddle。它不是一个复制粘贴解决方案，它需要一些调整才能按预期工作。

考虑使用CSS而不是提供的CSS：

.blow { float:left; clear:left; width:25%; height:25%; overflow:hidden; background-color:hotpink; color:black; }

您可以使用此JavaScript：

$('.blow').on('click', function(event){
    var element = $(this);
    if(element.attr('data-blow') == 'true'){
        element.animate({ width:'25%', height:'25%' }, 1000).attr('data-blow', 'false')
    } else {
        element.animate({ width:'100%', height:'100%' }, 1000, function(){
            $('body').animate({ scrollTop: element.offset().top });
        }).attr('data-blow', 'true');
    }
});

差异，解释：

首先，您应该在每次调用时缓存$(this)引用，它遍历DOM树以查找元素。

var element = $(this);

其次，您可以使用jQuery链接方法。而不是：

$(this).removeClass('overflow')
$(this).addClass('blow')
$(this).attr("data-blow", "false")

......你可以这样做：

$(this).removeClass('overflow').addClass('blow').attr("data-blow", "false")

第三，这又是一个技术性问题，但$(element).click(handler)实际上是$('element).on('click', handler)的捷径。我主张.on()，因为它可以更好地理解事件和处理程序。

加分： hotpink。

使用scrollTop有困难？

1 个答案: