jquery实现由下向上张开(页面底部)

<style type="text/css">
                 #slide{position:relative;}
                 .slide2{padding:100px 40px;background-color: #87CEEB;display: none;}
            </style>
          <button type="button" id="slide_btn">点我把</button>
            <div id="slide">
                 <div class="slide2">
                     
                 </div>
            </div>
            <script type="text/javascript">
                $('#slide_btn').click(function(){
                    // $(this).animate({ scrollTop: "+=500" }, 1000);
                    $('.slide2').slideToggle('slow')
                    $("html,body").animate({scrollTop:$("#slide").offset().top},1000);
                    
                })
            </script>