jQuery Scroll to top plus CSS3 Effects

J

Query Scroll to top Controll ini tak berbeda dengan yang selama ini sudah terpostingkan di banyak blog. Hampir semuanya bersumber dari dinamicdrive.com. Yang membedakan posting ini dengan semua posting lain tentang "jQuery Scroll to Top Controll" adalah pada penggunaan css3 yang berfungsi untuk menampilkan beberapa effek baru agar terlihat lebih dinamis. Jika scroll to top yang lain menggunakan bentuk "tips/tooltips" default browser, yang inipun berbeda juga karena melibatkan css2 yang dipadu dengan css3. Agar lebih jelas bagaimana "bentuk penampilan beda" dari jQuery scroll to top controll yang telah dipadukan dengan css3 ini silahkan anda coba dengan mengarahkan sekaligus klik scroll to top contoll di ujung kanan bawah halaman. Anda juga bisa mencobanya pada controll back to top yang berupa teks link di bawah kode css.

Javascript :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="http://gubhugreyotprojects.googlecode.com/svn/tools/jqGRscrolltop.js" type="text/javascript"></script>

Kode CSS :

.jqGRscrolltop{
        position:relative;
        font-weight:bold;
        padding:2px 4px;
        text-decoration:blink;
        color:#eee;
        background:#900;
        margin:20px;
        display:inline-block;
        opacity:0.5;
        filter:alpha(opacity=50);      
}
.jqGRscrolltop:hover{
        opacity:1.0;
        filter:alpha(opacity=100); 
}
.jqGRscrolltop:after{
        font-size:16px;
        font-weight:bold;
        font-family:Courier, monospace;
        text-align:center;
        position:absolute;
        right:-200px;
        top:-50px;
        content:"Scroll Back to Top";
        line-height:30px;
        width:30px;overflow:hidden;
        height:30px;
        background:#888;
        border-radius:4px;
        border:3px double #aaa;
        color:#eee;
        text-shadow:1px 1px 1px #000;
        opacity:0;
        filter:alpha(opacity=0);
        z-index:-10;
}
.GRscrolltop,.jqGRscrolltop:after{
        transition:0.6s linear;
        -o-transition:0.6s linear;
        -moz-transition:0.6s linear;
        -webkit-transition:0.6s linear;
        -ms-transition:0.6s linear;
}
.jqGRscrolltop:hover:after{
        width:190px;
        right:0;
        z-index:12;
        opacity:1.0;
        filter:alpha(opacity=100);
        box-shadow:2px 2px 4px #000;
}
.GRscrolltop{
        width:37px;
        height:40px;
        opacity:0.4;
        background:transparent url(https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png) center no-repeat;
        background-size:35px 38px;
        filter:alpha(opacity=40);
        border:3px double transparent;
        padding:5px;
        border-radius:10%; 
} 
.GRscrolltop:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        background:rgba(0,0,0,.4) url(https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png) center no-repeat;
        background-size:35px 38px;
        border:3px double #930;
        border-radius:50%;
}

1. Langkah langkah.
   • Login ke Blogger.com sobat dengan menggunakan akun anda sendiri
   • Klik Design klik Edit HTML
   • Klik Download Full Template (simpan untuk backup jaga-jaga barangkali gagal)
   • Klik atau centang Expand Widget Templates
   • Cari Kode ]]></b:skin>
   • Copy javascript dan letakkan di bawah ]]></b:skin>
   • Copy kode CSS dan letakkan di atas ]]></b:skin>
   • Klik "Simpan Template/Save Template"
   Jika anda ingin menggunakan sebuah ling controll untuk back to top seperti yang terletak di atas kode css, gunakan xHTML berikut:
   xHTML link scroll to top controll :
   
   

   Back to TOP

   1. Catatan/Keteoangan :.
      • Untuk mengganti image yang digunakan sebagai contoll, ganti 2 background dengan alamat: https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png.
      • Jika ingin merubah ukuran image contoll, lakukan perubahan pada : background-size:35px 38px;