"Link to top page"
Bootstrap 3.1.0 Snippet by whenom

<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>003</td> <td>First Name 3 </td> <td>Last Name 3</td> <td>B</td> </tr> <tr> <td>004</td> <td>First Name 4 </td> <td>Last Name 4</td> <td>A</td> </tr> <tr> <td>005</td> <td>First Name 5 </td> <td>Last Name 5</td> <td>A+</td> </tr> <tr> <td>006</td> <td>First Name 6 </td> <td>Last Name 6</td> <td>B</td> </tr> <tr> <td>007</td> <td>First Name 7 </td> <td>Last Name 7</td> <td>B</td> </tr> <tr> <td>008</td> <td>First Name 8</td> <td>Last Name 8</td> <td>A</td> </tr> <tr> <td>009</td> <td>First Name 9 </td> <td>Last Name 9</td> <td>A+</td> </tr> <tr> <td>010</td> <td>First Name 10 </td> <td>Last Name 10</td> <td>A+</td> </tr> <tr> <td>011</td> <td>First Name 11 </td> <td>Last Name 11</td> <td>B</td> </tr> <tr> <td>012</td> <td>First Name 12 </td> <td>Last Name 12</td> <td>A</td> </tr> <tr> <td>013</td> <td>First Name 13 </td> <td>Last Name 13</td> <td>A+</td> </tr> <tr> <td>014</td> <td>First Name 14 </td> <td>Last Name 14</td> <td>B</td> </tr> <tr> <td>012</td> <td>First Name 12 </td> <td>Last Name 12</td> <td>A</td> </tr> <tr> <td>013</td> <td>First Name 13 </td> <td>Last Name 13</td> <td>A+</td> </tr> <tr> <td>014</td> <td>First Name 14 </td> <td>Last Name 14</td> <td>B</td> </tr> <tr> <td>012</td> <td>First Name 12 </td> <td>Last Name 12</td> <td>A</td> </tr> <tr> <td>013</td> <td>First Name 13 </td> <td>Last Name 13</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: 20px; right: 20px; display:none; }
$(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 50) { $('#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:

On mobile, the tooltip keeps showing once scrolled to the top. It won't go away unless you tap again elsewhere. Fixed JS here:

<script type="text/javascript">

$(document).ready(function(){

$(window).scroll(function () {

if ($(this).scrollTop() > 50) {

$('#back-to-top').tooltip();

$('#back-to-top').fadeIn();

} else {

$('#back-to-top').fadeOut();

$('#back-to-top').tooltip('hide');

}

});

// scroll body to 0px on click

$('#back-to-top').click(function () {

$('body,html').animate({

scrollTop: 0

}, 800);

return false;

});

});

</script>

PabloCarbonari () - 6 months ago - Reply 1


Very nice snippet for getting code.

Sajjad Ahmad () - 4 years ago - Reply 1


thanks

shanika chamodi () - 1 year ago - Reply 0


you can do it just with html

iii () - 1 year ago - Reply 0


Remove Show and Hide else it will throw error

---------------------------------------------------------

$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function () {
$('#back-to-top').tooltip();
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});

$('#back-to-top').tooltip();

});

Robin John () - 2 years ago - Reply 0


Muito bom! Parabéns pelo script!

Randolph Lima () - 3 years ago - Reply 0


Hello,
Thanks a lot
But in my project when clicks on back to top link it immediately goes to top , I want to go slower , What is Your Suggestions ?
Thanks a lot.

AmirReza Besmi () - 3 years ago - Reply 0


$(document).ready(function(){

var amountScrolled = 200;

$(window).scroll(function () {

if ($(this).scrollTop() > amountScrolled) {

$('#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

}, 700);

return false;

});

$('#back-to-top').tooltip('show');

});

Rehmaanali () - 2 years ago - Reply 0


had you copy all the html, css and js for the button?... had loaded jquery on your page?

Mauricio Santamaria () - 3 years ago - Reply 0


Cheers, will come very useful for my projects :)

AZU () - 4 years ago - Reply 0


Hey thnx a lot.. U have really made it so lucid...

Sourav Mohanty () - 4 years ago - Reply 0


So nice, very easy to implement. thank you

gheith () - 4 years ago - Reply 0


thank you :)

Uli Worm () - 4 years ago - Reply 0


nice. thank you. take this.

Paul Green () - 4 years ago - Reply 0


So nice, very easy to integrate.

ferr ferr () - 4 years ago - Reply 0


Thanks very much for the snippet.

moisea () - 4 years ago - Reply 0


Improved the effect hiding the tooltip on click button.

whenom () - 4 years ago - Reply 0


buen trabajo!

Dacf94 () - 4 years ago - Reply 0


Now works. I have sized the height of container permitting the scroll down.

whenom () - 4 years ago - Reply 0


Thank you!

maxsurguy () - 4 years ago - Reply -1