Bootstrap Affix "Back to Top" Link

Getting the Bootstrap Affix component to show a "Back to Top" link after the page is scrolled below the top.

by Akram kamal

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#app-navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="app-navbar">
            <p class="navbar-text">Some navbar links here..</p>
        </div>
    </div><!-- /container-fluid -->
</nav><!-- /navbar -->


<div class="content-container" id="top">
    <p>Lorem ipsum dolor sit amet, altera appetere perpetua ei sit, quis augue ea his. Ludus quando eam et. Mel amet epicuri ancillae ut, dicat ornatus deleniti et sit. Admodum expetenda pertinacia et sea. Sea gubergren disputationi an, sit cu idque ridens pericula, ius dicta ludus ut.</p>
    <p>Vix aliquam fabulas mandamus ex. Viris exerci deterruisset id quo. Omittam evertitur sed cu, cu his atqui scripta voluptatum, eos omnis omnesque complectitur an. Ne mel malis recteque salutandi, dico dicta facete vix id. Ius illum quidam te, sonet copiosae mei ne.</p>
    <p>Duo id odio wisi, ut tempor deseruisse cum. Inimicus complectitur qui et, eius ponderum in per. No vix doctus detracto, velit vituperata vel ea. Sumo nihil putant an mei, sit civibus appareat deseruisse ea.</p>
    <p>In qui probo discere, vis integre voluptaria ad, at velit persius admodum mea. In partem percipitur...

CSS

.navbar-fixed-top + .content-container {
	margin-top: 70px;
}
.content-container {
	margin: 0 130px;
}



#top-link-block.affix-top {
    position: absolute; /* allows it to "slide" up into view */
    bottom: -82px; /* negative of the offset - height of link element */
    left: 10px; /* padding from the left side of the window */
}
#top-link-block.affix {
    position: fixed; /* keeps it on the bottom once in view */
    bottom: 18px; /* height of link element */
    left: 10px; /* padding from the left side of the window */
}

JavaScript

// Only enable if the document has a long scroll bar
// Note the window height + offset
if ( ($(window).height() + 100) < $(document).height() ) {
    $('#top-link-block').removeClass('hidden').affix({
        // how far to scroll down before link "slides" into view
        offset: {top:100}
    });
}