html - JQuery Div expand and scroll to bottom -
im using jquery expand div when button clicked, here button code:
<input type="button" value="reply" onclick="jquery('#replycont').slidetoggle()"
/>
and actual div:
<div id="replycont" style="display:none; border:1px #000000 solid; padding:10px;"> <form method="post" action="index.php?id=viewticket&seq=<?php echo $_get["seq"]; ?>#updates_bottom" enctype="multipart/form-data" class="form-stacked"> <div class="control-group"> <label class="control-label bold" for="message">message</label> <div class="controls"> <textarea name="ticket_update" id="ticket_update" rows="12" style="width:100%;"></textarea> </div> </div> <p><input type="hidden" name="ticketnumber" id="ticketnumber" value="<?php echo $_get["seq"]; ?>" /> <input type="submit" name="addupdate" id="addupdate" value="submit" /></p> </form> </div>
the button @ top of page , div down bottom, best way make page scroll bottom div visible button expanding div?
it preferred not use inline js, add id button, ,
$('#mybutton').on('click',function(){ $('#replycont').slidetoggle(function(){ $('html, body').animate({ scrolltop: $('#replycont').offset().top }, 500); }); });
and there go, animation launch when toggle done, if want run @ same time,
$('#mybutton').on('click',function(){ $('#replycont').slidetoggle(); $('html, body').animate({ scrolltop: $('#replycont').offset().top }, 500); });
Comments
Post a Comment