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

【问题标题】：How to automatically scroll when div expands at bottom of page?div在页面底部展开时如何自动滚动？
【发布时间】：2013-03-15 05:36:41
【问题描述】：

最近我陷入了死胡同。我正在尝试扩展页脚（#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>

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

试试看能不能完成这项工作。

【讨论】：

我不确定你的意思是什么@AaronBlenkush(?)
另外，如果在您滚动到的 div 之后有更多内容，您可能希望给该方法一个 false 参数以使其与视图底部对齐，而不是最佳。看看这个：developer.mozilla.org/en-US/docs/DOM/element.scrollIntoView
@mavili 我尝试使用那行代码似乎只是破坏了动画。它只是刷新了当前页面。我可以错误地执行它吗？我在 html 文件的第 4 行下添加了它。
@mavili：即，对于原生函数不使用 jQuery（有一个 scrollintoview plugin）。
它不应该刷新页面（如果它刷新我会非常惊讶！）。不过，我会用你的代码试一试，看看会发生什么。

【解决方案2】：

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

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

它会完成的。

【讨论】：