Trik Termudah Pasang Scroll Up & Scroll Down

Javascript scroll up sekaligus scroll down ini merupakan javascript paling sederhana sebagai sebuah auto scroller. Berfungsi sebagai penggulung ke atas dan ke bawah dengan pengaturan jarak (dalam pixel). Scroller dengan pengaturan jarak memberi keuntungan lebih karena memungkinkan kita memanfaatkan javascript ini dalam dua fungsi.

1. Sebagai auto scroller dengan jarak pendek/terbatas (lebih kecil dari tinggi halaman blog).
   Anda dapat mengatur jarak up dan scroll down ini dalam radius kecil seperti misalnya 500px, 700px, 900px atau dengan nilai berbeda yang disesuaikan dengan kebutuhan (misalnya dari bab-1 ke bab-2).
2. Memfungsikan auto scroller sebagai scroll to top contoll dan scroll to bottom controll. Ketika digunakan untuk fungsi seperti ini kita hanya perlu mengatur jarak gulung auto scroller dengan nilai yang sangat besar yang kira-kira pasti akan lebih dari ketinggian halaman blog (misalnya 50000).

Kode CSS :

<style type="text/css">
.GRfixed_top,.GRfixed_bottom,.GRtop,.GRbottom{
        font:Arial 12px;
        font-weight:bold;
        background:#CCC;
        color:#900;
        text-shadow:2px 2px 2px #888;
        border:1px solid #888;
        padding:3px 4px;
        cursor:pointer;
        opacity:0.7;
        z-index:20;
        filter:alpha(opacity=70);
        transition:0.7s ease-out;
        -o-transition:0.7s ease-out;
        -moz-transition:0.7s ease-out;
        -webkit-transition:0.7s ease-out;
        -ms-transition:0.7s ease-out;
}
.GRtop,.GRbottom{
        display:block;
        margin:15px auto;
        text-align:center;
}
.GRfixed_top,.GRfixed_bottom{
        position:fixed; 
        bottom:0; 
        left:3px;   
}
.GRfixed_bottom{
        left:130px;
}
.GRfixed_top:hover,.GRfixed_bottom:hover,.GRtop:hover,.GRbottom:hover{
        background:#900;
        color:#ddd;
        opacity:1.0;
        filter:alpha(opacity=100); 
        z-index:99;
}
</style>

Javascript :

<script type="text/javascript">
//<[CDATA[
m = 50000
function fixedScrolldown(){
    for (GR = 1; GR <= m; GR++){
        parent.scroll(1,GR);
    }
}
function fixedScrollup(){
    for (GR = m; GR >= 1; GR--){
        parent.scroll(m,GR);
    }
}
n = 1000 /* atur range scroller */
function GRdown(){
    for (GR = 1; GR <= n; GR++){
        parent.scroll(1,GR);
    }
}
function GRup(){
    for (GR = n; GR >= 1; GR--){
        parent.scroll(n,GR);
    }
}
//]]>
</script>

xHTML-1:

<input class="GRfixed_top" type=button value="Scroll to Bottom" onClick="fixedScrolldown()"/>
<input class="GRfixed_bottom" type=button value="Back to Top" onClick="fixedScrollup()"/>

xHTML-2:

<input class="GRtop" type=button value="Ke Bab-2" onClick="GRdown()"/>
Bab-1
Sebelum membahas lebih lanjut tentang jenis-jenis anjing galak yang suka menggigit manusia, dalam bab pertama akan dibahas terlebih dahulu jenis anjing lokal yang paling dibenci orang karena suka makan uang haram. Anjing lokal pemakan uang haram lebih dikenali sebagai anjing koruptor. Mereka selalu berpakaian rapi dan berharga mahal dengan mulut setiap saat berbuih menyuarakan "perangi dan bersihkan korupsi". Masyarakat lebih banyak yang tertipu dengan penampilan anjing-anjing ini dan setiap pemilu datang akhirnya kembali memilih mereka sebagai anggota DPR atau pejabat negara lainnya seperti bupati, gubernur, presiden ... dan ...

Bab-2

Akhir posting/penutup
<input class="GRbottom" type=button value="Back to TOP" onClick="GRup()"/>

Cara membuat : Menggunakan script sebagai button scroll to top controll dan scroll to bottom controll:

1. Login ke Blogger.
2. Klik "Rancangan (Design)".
3. Klik salah satu "Add a Gadget (Tambah Gadget)".
4. Pilih dan klik "HTML/Javascript"
5. Simpan seluruh kode kecuali xHTML-2 dalam "Box HTML/Javascript".
6. Klik "SAVE/SIMPAN"
7. Buka Blog dan lihat hasilnya.

Menggunakan script sebagai scroller dengan controll jarak (range controll).

1. Gunakan saat posting dan gunakan seperti terlihat pada xHTML-2
2. Atur range auto scroller pada javascript (n = 1000) untuk mendapat jarak yang sesuai.