1

我创建了一个面板,使用以下方式单击动画:

 <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

4

1 回答 1

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

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

于 2013-03-10T20:55:14.263 回答