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?
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?
Share Improve this question asked Jul 27, 2010 at 18:43 ThomasThomas 5,09921 gold badges71 silver badges101 bronze badges3 Answers
Reset to default 2If 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./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./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>