display：none to display：block - 如何让页面向下滚动？

Question

我正在使用javascript来更改带有onclick事件的div标签的显示。 div位于页面的底部，何时和/或如果需要，用户可以打开div。当div更改为display：block？

时，如何让页面向下滚动？

仅供参考：我试过了

var objDiv = document.getElementById("the_div_id");
objDiv.scrollTop = objDiv.scrollHeight;

该页面不会向下滚动。有什么想法吗？

Answer 1

var objDiv = document.getElementById("the_div_id");
objDiv.scrollIntoView();

Answer 2

这样的事情会起作用

通过div添加锚点

<a href="#div" id="showDivTrigger">
<a name="div"></a>
<div style="display:none;">
contents
</div>
<script>
var element = document.getElementById('#div');
element.style.display = '';
</script>

Answer 3

scrollTop仅对自身有滚动条的元素有意义（或者不滚动，但可以滚动）。从MSDN documentation：对于没有滚动条的对象，此属性始终为0。对于这些对象，设置属性无效。

你可以设置body.scrollTop代替（或使用具有相同效果的window.scrollTo），你需要在页面中元素的绝对位置，你可以通过向上走元素来获得offsetParent链并总计offsetTop距离。您可能最好使用框架，例如jQuery的offset方法，而不是手动执行此操作。 （当然，如果您只需要跳转到元素而不是直观滚动，那么mplungjan's solution是最简单的。）