使用Jquery自动向下滚动？

Question

我有一个定义了高度的模态框。 在此框的内部有一个手风琴框，当用户单击链接时该框会展开。 切换时，手风琴盒的高度超过模式框的高度，因此出现滚动条。

我想将条形图自动向下滚动到最低点，以在手风琴框中显示新内容。

手风琴框如下所示：

<script type="text/javascript"> 
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script> 

有没有办法将此向下滚动功能集成到现有功能中？ 是否存在针对此类行为的现有Jquery函数？

Answer 1

如果我了解您在寻找什么...

如果您想要一个不错的平滑滚动，那么scollTo插件是一个不错的选择。

如果您不在乎，只需使用哈希即可。 location.hash ='#someid';

Answer 2

如果您不想依赖任何插件或更改实际的URL，则可以使用scrollTop，请参阅http://api.jquery.com/scrollTop/

干杯。

Answer 3

诀窍是使用可滚动的外部container-div。 这样可以找出容纳实际内容的内部div的大小。
我的解决方案（您必须对手风琴进行一些调整）：

<html>
   <head>
      <style>
         #container {
            overflow-y: scroll;
            height: 200px; /* defined height */
         }
      </style>
   </head>
   <body>
      <div id="container">
         <div id="content">
            <!-- dynamic content -->
         </div>
      </div>
   </body>
   <script type="text/javascript" src="http://jquery.com/src/jquery-latest.js" ></script>
   <script type="text/javascript">
      function onNewContent() {
         $("#container").scrollTop($("#content").height());
      }

      //test
      $(document).ready(function() {
         for(var i = 0; i < 500; ++i)
            $("#content").append($("<div/>").html(i));
         onNewContent();
      });
   </script>
</html>