"Link to top page"
Bootstrap 3.1.0 Snippet by whenom

<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'); });

Similar snippets: See More


whenom 2014-04-11 11:55:20
    Now works. I have sized the height of container permitting the scroll down.
maxsurguy 2014-04-11 16:42:56
    Thank you!
Dacf94 2014-04-12 16:49:59
    buen trabajo!
whenom 2014-04-14 12:04:37
    Improved the effect hiding the tooltip on click button.
moisea 2014-05-10 08:35:24
    Thanks very much for the snippet.
Sajjad Ahmad 2014-05-22 07:58:23
    Very nice snippet for getting code.
ferr ferr 2014-06-10 14:44:00
    So nice, very easy to integrate.
Paul Green 2014-07-06 16:59:09
    nice. thank you. take this.
Uli Worm 2014-07-13 06:57:34
    thank you :)
gheith 2014-07-25 23:58:12
    So nice, very easy to implement. thank you
Sourav Mohanty 2014-08-31 20:15:04
    Hey thnx a lot.. U have really made it so lucid...
AZU 2014-10-22 14:53:39
    Cheers, will come very useful for my projects :)
AmirReza Besmi 2015-03-12 22:12:45
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.
Mauricio Santamaria 2015-03-20 12:16:04
    had you copy all the html, css and js for the button?... had loaded jquery on your page?
Rehmaanali 2016-04-06 12:34:47
Randolph Lima 2015-07-14 23:12:23
    Muito bom! ParabĂ©ns pelo script!
Robin John 2016-08-24 05:39:50
    Remove Show and Hide else it will throw error
iii 2017-03-05 19:45:55
    you can do it just with html
shanika chamodi 2017-04-25 05:08:18

Commenting will be back soon.