"Link to top page"
Bootstrap 3.1.0 Snippet by gmadigital

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" style="height:400px;"> <div class="row"> <br> <p>Please view this snippet in <a href="http://bootsnipp.com/fullscreen/x3p9" target="_blank">full screen here</a> and scroll all the way down.</p> <h2>Link to top page on scrolling down</h2> <table class="table table-striped"> <thead> <tr> <th>Student-ID</th> <th>First Name</th> <th>Last Name</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>First Name 1 </td> <td>Last Name 1</td> <td>A+</td> </tr> <tr> <td>002</td> <td>First Name 2 </td> <td>Last Name 2</td> <td>A</td> </tr> <tr> <td>014</td> <td>First Name 14 </td> <td>Last Name 14</td> <td>B</td> </tr> </tbody> </table> <a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a> </div> </div>
.back-to-top { cursor: pointer; position: fixed; bottom: 30px; right:30px; display:none; }
$(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 10) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // scroll body to 0px on click $('#back-to-top').click(function () { $('#back-to-top').tooltip('hide'); $('body,html').animate({ scrollTop: 0 }, 800); return false; }); $('#back-to-top').tooltip('show'); });

Related: See More

Questions / Comments: