Responsive back to top using Bootstrap | 2my4edge

05 March 2015

Responsive back to top using Bootstrap

Back to top using bootstrap, we already discussed some tutorials about bootstrap. Bootstrap makes the work very simple like that, to we are going to see about back to top onclick using Bootstrap with some script. This is one of the simple method to use this scroll top function.  let me explain you in details.

Responsive back to top in bootstrap
DOWNLOAD                     LIVE DEMO

already i did with same concept on back to top like Animated scroll to top by using Jquery, but that is with jquery without bootstrap so that is not responsive. but this one is responsive, because we are using Bootstrap. let see the coding.

CSS & JQUERY + BOOTSTRAP
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/
                                js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/
    3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
.back-to-top {
cursor: pointer;
position: fixed;
bottom: 0;
right: 20px;
display:none;
}
</style>

HTML
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
  <br>
   <table class="table table-striped">  
    <thead>  
      <tr>  
        <th>S No</th>  
        <th> Title </th>  
      </tr>  
    </thead>  
    <tbody> 
    <tr>
      <td>..............</td>
      <td>..............</td>
    </tr> 
    .....................
    .....................
    .....................
    </tbody>  
  </table>  

    </div>
</div>
</div>
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" 
  role="button" title="Back to Top" data-toggle="tooltip" data-placement="top">
  <span class="glyphicon glyphicon-chevron-up"></span>
</a>

SCRIPT
<script type="text/javascript">
    $(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');
});
</script>
we can change that 800 to any time, and that  > 50 is for pixels, if we come below more than 50px of your browser, that back to top will be appear. we can change that as we need. I think it is really helpful and simple for back to top. thanks for you attention.






RELATED POSTS :








  

4 comments:

  1. thank you.. i used this script for my learning bootstrap website

    ReplyDelete
  2. where specifically do we place this coding? i have both a bootstrap.css and a jquery.js file that i can edit.

    ReplyDelete

^