javascript - 添加向上滚动到动画面板

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

UPDATE:

只需将 ID [id="sliderbtn"] 添加到您的 anchor 并删除 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);
    });
}  
});
});

看看这是否是您想要的。 :)