JSFiddle - React, Tailwind, and code Playground

by kpowz

HTML

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css"
rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

    <div style="height: 400px;"></div>
    
<footer class="navbar navbar-fixed-bottom" id="footer">
    <div class="navbar-inner">
        <div class="container">
            <button data-target=".show-footer" data-toggle="collapse" class="btn btn-navbar"
            type="button" id="footer_btn">	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

            </button>
            <div class="nav-collapse collapse show-footer" id="footer_body">
                <nav>
                    <ul class="nav pull-right">
                        <li><a href="/about">About</a>

                        </li>
                        <li><a href="/contact">Contact</a>

                        </li>
                        <li><a href="/faq">FAQ</a>

                        </li>
                        <li><a href="/careers">Careers</a>

                        </li>
                        <li><a href="/privacy">Privacy</a>

                        </li>
                        <li><a href="/quotes">Quotes</a>

                        </li>
                        <li><a href="/terms">Terms</a>

                        </li>
                        <li><a target="_blank" href="http://news.railstutorial.org/">News</a>

                        </li>
                    </ul>
                </nav>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</footer>

CSS

.navbar-fixed-bottom {
    margin-top: 20px;
}
.navbar-fixed-top, .navbar-fixed-bottom {
    position: static;
}
.navbar-fixed-bottom {
    bottom: 0;
}
.navbar-fixed-top, .navbar-fixed-bottom {
    left: 0;
    margin-bottom: 0;
    right: 0;
    z-index: 1030;
}
.navbar {
    overflow: visible;
}

JavaScript

$(function() {
  $('#footer_body').on('show', function () {
    $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  });
});