Membuat ScrollTop Dengan js/java script

Kali ini saya share tentang cara membuat ScrollTop di blog WordPres. Ok langsung saja tanpa banyak basa basi.

Pertama-tama:

1. Kita buat file dengan nama scrolltop.js dengan notepad++ atau Dreamweaver


2. Buat kode seperti dibawah ini:
   jQuery(document).ready(function($){<br /> $(window).scroll(function(){<br /> if ($(this).scrollTop() < 500) {<br /> $('#smoothup') .fadeOut('slow');<br /> $("#smoothup").show();<br /> } else {<br /> $('#smoothup') .fadeIn('slow');<br /> $("#smoothup").hide();<br /> }<br /> });<br /> $('#smoothup').on('click', function(){<br /> $('html, body').animate({scrollTop:0}, 500);<br /> return false;<br /> });<br /> });


3. Masukkan ke directory theme yang anda ..../themeanda/js/letakkan disini.

Kedua:

• Buka file footer.php


• Lalu tambahkan kode ini:
  <a id="top" href='#'><i class="icon-up-bold"></i></a><br /> <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script><br /> <script type="text/javascript"><br /> var toper = $('a#top');<br /> $(window).scroll(function(){<br /> if ($(this).scrollTop() > 500) {<br /> toper.fadeIn( 'slow' );<br /> } else {<br /> toper.fadeOut( 'slow' );<br /> }<br /> });<br /> toper.click(function(){<br /> $('html, body').animate({scrollTop:0}, 500);<br /> return false;<br /> });<br /> </script><br /> <script type="text/javascript"><br /> var s = skrollr.init();<br /> </script>


• Save/Simpan

Ketiga:

• Buka style.css anda


• Dan tambahkan kode ini:
  /* nyus top */<br /> a#top {<br /> background-color: #666;<br /> border-radius: 3px;<br /> -moz-border-radius: 3px;<br /> -webkit-border-radius: 3px;<br /> -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);<br /> -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);<br /> box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);<br /> color: #eee;<br /> cursor: pointer;<br /> display: none;<br /> height: 30px;<br /> position: fixed;<br /> bottom: 20px;<br /> right: 20px;<br /> text-align: center;<br /> text-decoration: none;<br /> width: 30px;<br /> z-index: 9999;<br /> }<br /> a#top:hover {<br /> background-color: #000;<br /> color: #fff;<br /> text-decoration: none;<br /> }


• Save/Simpan

Sekarang coba kalian refresh blog kalian terus scroll kebawah pasti muncul ScrollTopnya, kalau belum berhasil dicoba lagi. Gimana gampang bukan?

Kalau kalian mau mengganti warna/bordernya tinggal edit kode warna dan border di style.css.

Selamat berkreasi...!

Tutorial blogger

Tweet