Download Now Download Themes Gratis WordPress Responsive!

Cara Membuat Scroll Top Jquery Effect WordPress

scroll-top wordpressSering anda melihat website yang menambahkan scroll top ke atas dengan disertai efek halus, Ini sangat berguna sekali buat para pengunjung jika anda mempunyai website dengan halaman yang panjang, dan dengan scroll top ini anda memberikan pengguna anda cara mudah untuk kembali ke atas. Pada artikel ini, saya akan menunjukkan cara untuk menambahkan sebuah scroll top dengan efek yang terlihat halus di WordPress menggunakan jQuery.

Menambahkan Scroll Top Efek dengan jQuery di WordPress

Untuk menambahkan Scroll Top, saya akan menggunakan jQuery, beberapa CSS dan satu baris kode HTML dalam tema WordPress anda. Pertama buka editor teks seperti Notepad. Buat file dan simpan sebagai scrolltop.js. Salin dan sisipkan kode ini dalam file tersebut:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

Simpan file dan upload ke direktori atau folder theme wordpress anda /js/ . Jika theme wordpress yang anda gunakan tidak memiliki folder /js/, buatlah terlebih dahulu dan masukkan file scrolltop.js. Kode ini adalah script jQuery yang akan menambah efek gulir mulus ke tombol yang akan membawa pengguna ke bagian atas.

Hal berikutnya yang perlu anda lakukan adalah untuk menambahkan scrolltop.js ke theme wordpress anda. Untuk melakukan itu dengan baik, kita akan enqueue script di WordPress. Salin dan sisipkan kode ini ke file functions.php theme anda.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/scrolltop.js', array( 'jquery' ), '',  true );

Langkah berikutnya Paste HTML ini kedalam file footer.php theme anda.

<a href="#top" id="smoothup" title="Back to top"></a>

Selanjutnya tambahkan code CSS berikut ke file style.css theme yang anda gunakan.

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("images/scrolltop.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) ;
background: url('') no-repeat;
}

dalam css diatas, saya menggunakan gambar scrolltop.png sebagai icon yang akan digunakan untuk scroll top, dan saya masukkan gambar tersebut di folder /images/ dari theme wordpress yang digunakan. silahkan anda upload juga gambar ke folder images dari theme anda.

Baca : Membuat scroll top sederhana di wordpress

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

Must Read...!
10 Syarat SEO yang Perlu anda Pelajari

Jika Anda bekerja di industri web atau Anda memiliki situs web apapun atau anda...

Cara Optimalkan SEO Gambar Tingkatkan Peringkat Situs

Ketika menambahkan foto ke situs web Anda, sesuatu yang sering diabaikan, tetapi mudah dilakukan...

Close