如何在页面底部的div扩展时自动滚动？

Question

最近我陷入了死胡同。我正在尝试扩展页脚(#footernotes)，这基本上是一个div在body后面(用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>

如果您认为有更好的方法，仍然可以回答这个问题，我只是觉得我会发布这个问题，以防其他人有相同的问题。

- Banzboy

Answer 1

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

试一下看是否能完成任务。

- mavili

---

我不确定你的意思是什么，@AaronBlenkush（？） - mavili

此外，如果您要滚动到的 div 后面还有更多内容，则可能需要给该方法一个 false 参数，以便将其与视图底部而不是顶部对齐。请查看：https://developer.mozilla.org/en-US/docs/DOM/element.scrollIntoView - mavili

@mavili：也就是说，对于一个本来就有原生函数的情况，我们不需要使用jQuery（例如scrollintoview插件）。 - Aaron Blenkush

@AaronBlenkush 哦，对了。是的，当有本地形式的解决方案时，我讨厌使用插件。除非我已经在我的文档中使用了一个框架，那么我会使用代码更少的方法（即本地或框架方法）。 - mavili

我再次测试了一下，似乎是井号弄错了，我把它删掉了，现在它运行良好。现在只有一些浏览器问题，使用Chrome和Safari时需要点击两次才能运行。不过Firefox表现得很好。谢谢！ - Banzboy

Answer 2

可以使用JQuery方法.focus()来实现。只需要添加 $(divname / .class / #id).focus();

就可以完成。

- Vish