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 plugin是一个很好的选择。

如果你不在乎，只需使用哈希。 location.hash ='＃someid';

Answer 2

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

干杯。

Answer 3

诀窍是使用可滚动的外部容器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>

使用Jquery自动向下滚动？

3 个答案: