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 Renilson Meneguci

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 {
    display: none; /* for pages shorter than the viewport */
}
#top-link-block.affix {
    position: absolute; /* allows it to "slide" up into view */
    bottom: -82px;
    left: 10px;
}
#top-link-block.affix-bottom {
    position: fixed; /* keeps it on the bottom once in view */
    bottom: 18px;
    left: 10px;
}

JavaScript

$('#top-link-block').affix({
    offset: {
        top: 82, // point were link should start sliding into view
        bottom: $(document).height() - 100 // link should "pin" to bottom
    }
});