在按钮单击时从底部滑动div并向上推动屏幕

Question

这是一个移动网站。我在页面底部有一个“更多”按钮，点击它时会显示额外的页脚链接。现在，问题是，如果我使用jQuery的slideToggle它显示菜单，页面高度增加但它仍然隐藏，这意味着我必须滚动屏幕才能查看它。但是当我再次按下按钮时，它会隐藏菜单并提供所需的效果。

我的代码是：

HTML

<div class="footer-more" style="text-align:center;"><button class="footer-more-btn">More +</button></div>

<div class="bottom-nav-container">
    <div>
        <ul>
            <li><a href="javascript:void(0);" id="trackOrder">Track Your Order</a></li>
            <li><a href="/faqs">FAQs</a></li>
            <li><a href="/mobile-about-us">About Us</a></li>
            <li><a href="/t-and-c">Terms</a></li>
            <li><a href="/privacy">Privacy</a></li>
        </ul>
    </div>  
</div>

CSS

.bottom-nav-container{
    margin-top:20px;
    width:100%;
    height:200px;
    border-top:1px solid #e8e5e5;
    display:none;
}

.bottom-nav-container ul{
    background: #f9f9f9;
}

.bottom-nav-container ul li{

}

.bottom-nav-container ul li a{
    display: block;
    font-size: 13px;
    font-weight: 300;
    color: #645d54 !important;
    text-shadow: 0 0 0 rgba(0,0,0,0);
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    border-bottom:1px solid #e8e5e5;
}

JS

$pop = jQuery.noConflict();
$pop(".footer-more-btn, .close-footer").click(function(){

  $pop(".bottom-nav-container").slideToggle();

});