ebsoftmedia.com

Content

Membuat Responsive Back to Top dengan Bootstrap

Tutorial Boostrap Kali ini kita akan Membuat Back To Top dengan Bootstras di webiste yang responsive , Back to top yaitu sebuah link atau tombol yang digunakan untuk men-scroll otomatis halaman website yang berada di bawah halaman langsung keatas halaman , tanpa perlu menggeser scroll browser.

Back to top , memang bukan merupakan komponen utama pada website, namun web yang responsive dan user friendly juga harus memperhitungkan kemudahan pengguna atau pengunjung website.

Tentunya ini bertujuan agar pengunjung website merasa mudah dalam mengakses halaman website kita, sementara itu pengunjung akan senantiasa berlama-lama membaca atau berselancar di website kita.

membuat back to top responsive dengan bootstrap

CSS JQUYER BOOTSTRAP

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/
                                js/bootstrap.min.js"></script>
<link href="http://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>

Artikel Terkait

title
»

Simple Dropdown Menu dengan Bootstrap

Dalam pembuatan Menu Dropdown dengan Bootstrap sangatlah mudah, Bootstrap sudah menyediakan icon...