Question

最近我走到了尽头。我正在尝试扩展页脚（#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>

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

Answer 1

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

试着看看是否可以胜任。

Answer 2

可以使用Jquery方法.focus（）完成。只需要添加

$（divname / .class / #id）.focus（）;

就可以了。

当div在页面底部展开时如何自动滚动？

2 个答案: