4

最近我陷入了死胡同。我正在尝试扩展页脚（#footernotes）并且有效，它基本上是身体后面的一个 div（使用 z-index 完成），当您单击一个按钮时，它会向下移动。滚动条也随之而来，这意味着页面现在更长了。

但我想做的是让视口随着扩展的 div 移动。现在发生的情况是，当我按下按钮 (.secret) 时，div (#footernotes) 进入但它仍然不在视口中，除非您手动滚动以查看较长的页面。

因此，对于一些问题，如何在扩展页面后使视口自动向下滚动？换句话说，如何让视口停留在页面底部。

这是我的代码：

<script>
$(document).ready(function(){
    $('.secret').click(function(){
            $("#footernotes").animate({top: "100px"}, 1000);
        return false;
    });
});
</script>

<div id="footer">
    <a href="" class="secret" ><div id="buttontest" style="width:50px; height:50px; background-color:green;"></div></a>
    <div id="footernotes">
    </div>
</div> <!-- end #footer -->

以及#footernotes 的 CSS

#footernotes {
    background-color: red;
    width: 100%;
    position: relative;
    top: -80px;
    height: 150px;
    z-index: -400;
}

编辑：在输入我想出答案的问题时，您必须使用 scrollTop。我在下面的示例中添加了行代码：

<script>
    $(document).ready(function(){
        $('.secret').click(function(){
                $("#footernotes").animate({top: "100px"}, 1000);
                $('body,html').animate({scrollTop: "210px"},1000);
            return false;
        });
    });
    </script>

如果您认为有更好的方法，您仍然可以回答这个问题，我只是想我会留下这个问题，以防其他人有同样的问题。

4

2 回答 2

10 
document.getElementById('divID').scrollIntoView();

试着看看这是否能完成这项工作。

于 2013-03-14T19:16:33.977 回答
1

可以使用 Jquery 方法 .focus() 来完成。只需要添加

$(divname / .class / #id).focus();

它会完成的。

于 2013-03-14T21:36:41.207 回答