Membuat tombol kembali keatas otomatis di blog

Membuat tombol kembali keatas otomatis di blog

Membuat back to top auto hide dan trik apabila tidak berhasil, simak ulasan berikut.
Membuat back to top auto hide di blog sangat terasa diperlukan, untuk yang isi artikelnya panjang, atau bagi rekan yang memperhatikan bagaimana cara membuat nyaman pengunjung yang memakai peralatan selular, di selular sangat terasa bahwa back to top sangat diperlukan, kolom yang menyempit, row jadi tambah banyak, sehingga cukup jauh untuk menjangkau menu yang diatas.
Banyak cara membuat back to top dan berikut salah satuya memanfaatkan Jquery :

1. ditemplate sudah harus tersemat jquery, kalau belum ada silahkan tempatkan script link berikut diatas </head> atau diatas </body>, berikut link nya :
   <script src='http://code.jquery.com/jquery-2.1.4.min.js' type='text/javascript'/>
2. Copy  script dibawah ini :
   <a href='#' id='scroll' style='display: none;' title='Scroll to Top'>Top<span/></a> <script type='text/javascript'> jQuery(document).ready(function($){ $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $("#scroll").fadeIn(); } else { $("#scroll").fadeOut(); } }); $("#scroll").click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> Paste di template (Edit html) diatas </body>.
3. Copy  kode css  berikut ini : 
   #scroll { display:none;position:fixed;right:5px;bottom:10px;cursor:pointer;width:50px;height:50px; background-color:#3498db;text-indent:-9999px;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px} #scroll span { position:absolute;top:50%;left:50%;margin-left:-8px;margin-top:-12px;height:0;width:0; border:8px solid transparent;border-bottom-color:#ffffff;} #scroll:hover { background-color:#e74c3c;opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)";} Paste di template (Edit html) diatas ]]></b:skin>.

Coba lihat hasilnya (gulir kebawah), apakah berhasil ?
Kalau tidak berhasil, salah satu kemungkinannya adalah konflik dengan jquery lain yang sudah ada sebelumnya, contoh pada kasus yang saya alami, sudah ada jquery untuk menampilkan title otomatis, seperti dibawah ini : 

<script>
jQuery(document).ready(function($){
    $(&quot;img&quot;).each(function(){
     var $img = $(this);
     var filename = $img.attr(&quot;src&quot;)
     $img.attr(&quot;title&quot;,
      filename.substring((filename.lastIndexOf(&quot;/&quot;))+1,
      filename.lastIndexOf(&quot;.&quot;)));
     });
     /*jquery lain sisipkan disini*/
});
</script>

Jadi triknya : cari jQuery(document).ready(function($){ dan sisipkan script back to top auto hide dalam jquery tersebut, hasilnya akan seperti ini :

<script>
jQuery(document).ready(function($){
    $(&quot;img&quot;).each(function(){
     var $img = $(this);
     var filename = $img.attr(&quot;src&quot;)
     $img.attr(&quot;title&quot;,
      filename.substring((filename.lastIndexOf(&quot;/&quot;))+1,
      filename.lastIndexOf(&quot;.&quot;)));
     });

    /*back-to-top auto hide*/
    $(window).scroll(function(){
        if ($(this).scrollTop() &gt; 100) {
            $(&quot;#scroll&quot;).fadeIn();
        } else {
            $(&quot;#scroll&quot;).fadeOut();
        }
    });
    $(&quot;#scroll&quot;).click(function(){
        $(&quot;html, body&quot;).animate({ scrollTop: 0 }, 600);
        return false;
    });
    /*back-to-top auto hide end*/

});
</script>

Back to top auto hide Sumber:
Author: CodexWorld
Author URL: http://www.codexworld.com/
Author Email: contact@codexworld.com
Tutorial Link: http://www.codexworld.com/back-to-top-button-using-jquery-css/

good luck