Automatically scroll down with Jquery?_问答_开发者

开发者 https://www.devze.com 2023-01-09 06:49 出处：网络

I have a modal box with a defined height. Inside of this box there is an accordion box that expands when a user clicks a link. The height of the accordion box when it is toggled exceeds the height of

I have a modal box with a defined height. Inside of this box there is an accordion box that expands when a user clicks a link. The height of the accordion box when it is toggled exceeds the height of the modal box and thus a scrollbar appears.

I would like to automatically scroll the bars down to its lowest point to display the new content in the accordion box.

The accordian box looks like this:

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

Is there a way开发者_开发知识库 to integrate this scroll down function into the existing function? Is there an existing Jquery function for this type of behavior?

If I understand what you're looking for...

If you'd like a nice smooth scroll, then the scollTo plugin is a great choice.

If you don't care, just use a hash. location.hash = '#someid';

If you don't want to rely on any plugin, or change the actual URL, you could use scrollTop, see http://api.jquery.com/scrollTop/

Cheers.

The trick is to use an outer container-div which is scrollable. This allows to find out the size of the inner div which holds the actual content.
My solution (You have to do some adjustments for your accordion):


<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>