jQuery-CSS3 Scroll To Top Controll

jQuery Scroll to top Controll berfungsi sebagai sebuah penggulung halaman otomatis yang disertai pengaturan kecepatan menggulung (scroll). Kecepatan scroll bersifat dinamis, dimana semakin jauh jarak ke atas halaman maka kecepatan scroll akan semakin bertambah. Contoll back to top dapat dibuat dalam bentuk bentuk teks link dengan posisi berpindah-pindah dengan jumlah tak terbatas, namun dapat juga dibuat sebagai controll statis dengan posisi selalu terlihat di halaman blog. Posisi controll dapat diatur disudut kanan-bawah, kiri-bawah, kanan-atas, kiri-atas atau berbagai tempat yang lain dengan melakukan pengaturan pada javascript (offsetx:5, offsety:5). Berbeda dengan jQuery Scroll to top controll yang lain, pada scroll to top contoll yang akan kita buat ini telah menyertakan beberapa effek dari css3 serta penambahan kode css2 untuk menggantikan tips/tooltip default. Tentu saja perubahan ini membawa pengaruh yang sangat besar hingga memperlihatkan perubahan tampilan jauh berbeda.

D E M O

Cara Membuat :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Copy Javascript dan letakkan di atas ]]></b:skin>
8. Klik "Simpan Template (Save Template)".

Javascript :

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

<script type="text/javascript">
var scrolltotop={
 setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
 controlHTML: '<div class="jqGRscrolltop"><div class="GRscrolltop"></div></div>', 
 controlattrs: {offsetx:5, offsety:5}, 
 anchorkeyword: '#GRtop', 
 state: {isvisible:false, shouldvisible:false},
 scrollup:function(){
  if (!this.cssfixedsupport) //if control is positioned using JavaScript
   this.$control.css({opacity:0}) //hide control immediately after clicking it
  var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
  if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
   dest=jQuery('#'+dest).offset().top
  else
   dest=0
  this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
 },

 keepfixed:function(){
  var $window=jQuery(window)
  var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
  var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
  this.$control.css({left:controlx+'px', top:controly+'px'})
 },

 togglecontrol:function(){
  var scrolltop=jQuery(window).scrollTop()
  if (!this.cssfixedsupport)
   this.keepfixed()
  this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
  if (this.state.shouldvisible && !this.state.isvisible){
   this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
   this.state.isvisible=true
  }
  else if (this.state.shouldvisible==false && this.state.isvisible){
   this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
   this.state.isvisible=false
  }
 },
 
 init:function(){
  jQuery(document).ready(function($){
   var mainobj=scrolltotop
   var iebrws=document.all
   mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
   mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
   mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
    .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
    .click(function(){mainobj.scrollup(); return false})
    .appendTo('body')
   if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
    mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
   mainobj.togglecontrol()
   $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
    mainobj.scrollup()
    return false
   })
   $(window).bind('scroll resize', function(e){
    mainobj.togglecontrol()
   })
  })
 }
}

scrolltotop.init()
</script>

Javascript :

.jqGRscrolltop{
        position:relative;
        font-weight:bold;
        padding:2px 4px;
        text-decoration:blink;
}
.jqGRscrolltop{
        display:inline-block;
        margin:20px;
        background:#900;
        color:#fff;
        opacity:0.5;
        filter:alpha(opcity=50); 
}
.jqGRscrolltop:hover{
        opacity:1.0;
        filter:alpha(opcity=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:#900;
        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 #eee;
        border-radius:50%;
}

Catatan/Keterangan :

1. Jika dalam blog anda sudah menggunakan jQuery v1.2.6 s/d jQuery v1.7.1, maka jQuery dalam scroll to top controll tidak perlu dipakai karena dalam satu blog cukup menggunakan satu jQuery.
2. Jika membutuhkan panduan cara backup template, cara cari kode dan berbagai cara menyimpan css, javascript dan xHTML, silahkan buka Special Tutorials" yang ada di menu vertical sebelah kiri halaman.
3. Untuk merubah image scroll to top controll, silahkan ganti URL background image dalam kode css:
   https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png
4. Untuk merubah ukuran image, silahkan rubah kode css:
   background-size:35px 38px;
5. Jika ingin menggunakan javascript dalam bentuk link yang sudah di upload di google code, silahkan buka demo dan dapatkan link javascriptnya di sana.
6. Sumber : http://dynamicdrive.com

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Seloso   PON,Maret,19,2012

» Happy Blogging - gubhugreyot «