添加向上滚动到动画面板

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>

这很好用，但是当它针对某些屏幕尺寸进行动画处理时，您看不到内容（它位于浏览器底部边缘下方）。我需要做的是同时让页面向上滚动 - 有什么想法吗？是的

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

看看这是不是你想要的。 :)