Cara Membuat Tombol Back to Top Menggunakan JQUERY Sederhana

Kali ini saya akan berbagi sedikit trik lama namun insyallah masih sering dibutuhkan, yaitu trik untuk membuat tombol back to top di setiap halaman.

Untuk membuat tombol back to top ini, yang kita butuhkan hanya 3 file, yaitu file jquery (saya menggunakan jquery v2.1.4), file css, dan pastinya file html yang akan digunakan menampilkan tombolnya

Pertama, Sekarang kita mulai membuat file htmlnya (index,html)

 
.
.
<html>
 <head>
  <script src="jquery.js"></script>
  <link rel="stylesheet" href="style.css">
 </head>
 <title></title>
 <body>
  <div id="wrapper">
   <h1>Membuat Tombol Back To Top Dengan Jquery</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate officiis cupiditate provident ex ab enim atque asperiores harum necessitatibus voluptatum maiores, nobis eaque itaque doloribus doloremque nemo modi quas iusto ea porro molestiae reprehenderit! Autem quos, quia animi tempora nesciunt quis incidunt eligendi quo. Minus laboriosam at ipsa, numquam fugiat voluptas perspiciatis nobis, nemo quis asperiores sequi dolor expedita tempore soluta aut! Laborum harum numquam ex beatae ipsa eveniet exercitationem veritatis facere minima reiciendis, tenetur nulla facilis quisquam quidem, odio illo officiis dicta a possimus incidunt laudantium pariatur cum. Eum error hic deserunt, esse corporis quos neque voluptates fuga pariatur!</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quaerat numquam temporibus officiis nostrum aliquid, est reprehenderit porro sapiente magnam eaque assumenda adipisci nulla mollitia harum deleniti commodi nesciunt corrupti deserunt nam animi voluptatem id dolorum necessitatibus! Corporis enim, rerum hic tenetur atque, quasi nobis sequi est necessitatibus suscipit. Odit ut eligendi sit velit earum ratione. Delectus enim, repudiandae optio fugit! Non numquam incidunt explicabo neque ratione voluptates error laboriosam. Asperiores id vitae similique enim.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quae nobis natus corporis sequi omnis a debitis autem numquam cumque ipsa, doloremque culpa iste nihil dolor, dolore accusantium reprehenderit quasi! Ex, animi vitae, accusantium voluptatibus ipsum aut! Quidem, eum? Autem voluptates quis, voluptate recusandae quas dolor odit quia provident perspiciatis earum deleniti laborum quam assumenda dolores cupiditate cumque eum officia voluptas sit nemo repellat voluptatibus! Quasi animi molestiae aperiam, accusamus ducimus temporibus a vitae ab?</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias ullam dolore, neque incidunt dolor non, doloremque numquam labore fuga veniam hic, quod deserunt distinctio eos repellat officiis vero placeat nam esse optio. Eligendi mollitia, praesentium sunt veritatis pariatur illo nemo amet, quod autem nihil corporis reprehenderit soluta repellendus at expedita porro esse, consequuntur nam. Deserunt voluptate obcaecati temporibus incidunt ipsa, recusandae repellat minus facilis, beatae dolor, nisi perspiciatis molestias nobis quo est rerum animi non?</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, vero. Aliquid tempore veritatis saepe quos totam, sint sed ab consequuntur vitae beatae voluptate repellat dolorum nulla maxime, ullam aut eligendi. Repellat rem deleniti mollitia officia quam, ipsa veniam, voluptatibus natus molestiae assumenda. Molestiae veniam culpa, suscipit tenetur ducimus reiciendis possimus accusamus fugit, temporibus minus quaerat consequatur vero fugiat debitis illum quis maiores numquam explicabo voluptatem. Sed officia at modi vero neque ex, soluta esse, veniam.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis at accusantium, omnis nisi pariatur. Repudiandae fuga rem facere, officia reprehenderit quia explicabo. Quia accusamus velit, dignissimos cumque recusandae similique quae omnis ipsum necessitatibus pariatur eius? Illo unde, dolorum. Facilis nisi ad laborum labore non corporis minus consectetur quam quibusdam aperiam. Ea earum voluptate quia consectetur quisquam odio eligendi, repellendus eaque. Impedit voluptatem dolorum nobis veritatis fuga odio, atque reprehenderit sunt assumenda at accusamus nemo. Incidunt cum, ex quidem, magni animi, sequi dolor at sed facere perspiciatis impedit consequuntur numquam optio maiores consequatur eos delectus debitis. Aperiam, atque! Ullam autem adipisci omnis earum ex nesciunt aliquam, deserunt ab minus harum iste dicta commodi optio pariatur sequi. Animi odit eveniet consequuntur officia quisquam sed dolorum debitis explicabo ad ea rerum doloribus quas laborum dolorem eaque ullam reiciendis, eius dolore dignissimos vel corporis dicta maxime. Hic ex ab autem, porro quaerat ratione vel itaque commodi perferendis tempora. Aliquid nihil magnam, omnis fugit incidunt magni commodi consectetur nesciunt iste ullam fugiat recusandae, soluta odio quae. Necessitatibus, recusandae! Repellendus qui dolor reiciendis aperiam deleniti eveniet alias sit suscipit, omnis quidem necessitatibus aliquam, consequuntur provident repudiandae, aspernatur atque vitae neque. Maxime, atque. Autem officiis repellendus impedit?</p>
   <!-- letak fungsi untuk memanggil javascript tombol balik ke atas -->
   <input type="button" value="Ke Atas" id="balikkeatas" onclick="keatas()">
  </div>
  <!-- javascript untuk tombol balik ke atas -->
  <script>
   $(document).ready(function(){
   $(window).scroll(function(){
    if ($(window).scrollTop() > 100) {
     $('#balikkeatas').fadeIn();
    } else {
     $('#balikkeatas').fadeOut();
    }
    });
   });

   function keatas()
   {
    $('html, body').animate({scrollTop : 0},500);
   }
  </script>
 </body>
</html>

Kedua, buat file cssnya (style.css)

 
.
.
body
{
 background-color:#F2F2F2;
 font-family:helvetica;
}
#wrapper
{
 text-align:center;
 margin:0px auto;
 padding:0px;
 width:760px;
}
#wrapper p{
 padding: 20px;
 margin: 20px;
 background: #fff;
}
#balikkeatas
{
 cursor: pointer;
 position:fixed;
 left:75%;
 bottom:50px;
 border:3px solid #585858;
 background-color:#0091FF;
 color:#585858;
 border-radius:100%;
 height:90px;
 width:90px;
 font-size:15px;
 display:none;
}

Ketiga, Jangan lupa copy file jquery v 2.1.4 Disini, dan kasih nama (jquery.js)

Hasilnya akan seperti berikut: