Home » Ask (Forum) » Cara Menambahkan Scroll Top di WordPress?

Question

Hi, Mohon bantuan kepada teman-teman, saya ingin menambahkan scroll top di salah satu blog saya karena artikel yang saya tampilkan sangatlah panjang sehingga saya pikir perlu tambahan scroll top di blog untuk membantu pengunjung yang membaca di blog saya. tetapi saya kurang paham bagaimana caranya. Mungkin teman – teman bisa membantu saya untuk ini ?

Aug 25, 2016 (3 months ago) - Posted by 1 Comment

One Answer

  1. Yeni says:

    Hi,

    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.

    Register Member

Your Answer

Your email address will not be published. Required fields are marked *