Back to Top 'Smooth Page Scroll' Bag.2

Baiklah pada kesempatan kali utta kembali lgi untuk berbagi Ilmu mengenai 'Back to Top 'Smooth Page Scroll'' Back To Top ini sudah banyak digunakan oleh para blogger untuk memperindah tampilan blognya. Banyak ragam kreasinya, seperti salah satunya menggunakan jQuery. dan pada postingan saya sebelumnya pernah juga saya share antara lain : Back to Top 'Smooth Page Scroll' dan Back to Top 'Scroll Page'. Jika sobat tidak tertarik dengan tuorial berikut, silahkan sobat lht tutorial saya yang sebelumnya..



Baiklah Jika sobat tertarik mencobanya silahkan ikuti langkah berikut :

#ULtoTop {
text-align:center;
position:fixed;
bottom:18px;
right:22px;
cursor:pointer;
display:none;
color:#000;
font-family:verdana;
font-size:11px;
}

4. Selanjutnya Masukkan kode HTML berikut diatas </body>

<div id='ULtoTop'>
<img src='http://picturestack.com/237/413/j0Jprev1prn.png' title='Back to Top Page' style='width:40px;height:40px;border:3px double transparent;padding:5px;background:#111;border:3px double #eee;border-radius:50%;box-shadow:1px 1px 15px darkred;-moz-box-shadow:1px 1px 15px darkred;-webkit-box-shadow:1px 1px 15px darkred'/></div>

5. Selanjutnya letakkan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type='text/javascript'>
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() > 100) {
            $('#ULtoTop').fadeIn();  
        } else {
            $('#ULtoTop').fadeOut();
        }
    });

    $('#ULtoTop > img').click(function() {
        $('body,html').animate({scrollTop:0},800)
                .animate({scrollTop:25},200)
                .animate({scrollTop:0},150)
                .animate({scrollTop:10},100)
                .animate({scrollTop:0},50);
    });  
});
</script>

6. Langkah terakhir Simpan template. Dan berhasil.

Keterangan:
- Script jquery (yang berwarna biru muda) jika sudah memasang ditemplate sobat, maka kode diatas tidak perlu dipasang lagi (biar tidak double).


Please rate this article: