Question

我创建了一个面板，可以使用以下方式设置动画：

 <script>
function toggleSlider() {
    if ($("#panelThatSlides").is(":visible")) {
        $("#contentThatFades").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#panelThatSlides").slideUp();
            }
        );
    }
    else {
        $("#panelThatSlides").slideDown(600, function(){
            $("#contentThatFades").animate(
                {

                 opacity: "1",
                },
                600
            );
        });
    }   
}
</script>

这很有效，但是当它为某些屏幕尺寸设置动画时，您无法看到内容（它位于浏览器底部边缘下方）。我需要做的是同时让页面向上滚动 - 任何想法？ YHX

Answer 1

您需要的基本功能是：

$('html,body').animate({ 
  scrollTop: $('#panelThatSlides').offset().top 
}, 600);

<强>更新

只需将ID [id="sliderbtn"]添加到您的主播并移除onclick个活动。

 <a href="#" onclick="toggleSlider();"><img alt="" src="/images/css/blind.jpg" /></a>

使用以下方式更新您的JavaScript：

$(document).ready(function() {
$("#sliderbtn").click(function () {
if ($("#panelThatSlides").is(":visible")) {
    $("#contentThatFades").animate(
        {
            opacity: "0"
        },
        600,
        function(){
            $("#panelThatSlides").slideUp();
        }
    );
}
else {
    $("#panelThatSlides").slideDown(600, function(){
        $("#contentThatFades").animate(
            {
                opacity: "1"
            },
            600
        );
        $('html,body').animate({ 
         scrollTop: $('#panelThatSlides').offset().top 
        }, 600);
    });
}  
});
});

看看这是不是你想要的。：）

添加向上滚动到动画面板

1 个答案: