Stationary Control – Kontrol Stasioner ini biasanya di sudut kanan bawah jendela web page yang setelah diklik dengan cepat halaman website (blog) akan menggulung ke TOP PAGE. Jika halaman website (blog) terlalu panjang ke bawah, fitur ini menjadi solusi navigasi dan ide baik agar visitor mendapati cara mudah cepat (otomatis) untuk bergulir (scroll) ke bagian PALING ATAS halaman web.
Memasang tombol scrollup-scrolldown di website
Scroll up
Saya akan share script jQuery Scroll to Top Control versi 1.1 dari http://www.dynamicdrive.com. Singkatnya script jQuery ini menawarkan kemampuan scroll atau menggulung ke posisi absolut (from top of page) atau bahkan terhadap specific element pada halaman tertentu. Stasioner kontrolnya tidak selalu terlihat pada monitor, tetapi script memungkinkan Anda menentukan seberapa jauh ke bawah halaman (dalam satuan pixel) sebelum user mendapati stasioner kontrol tersebut.
Elok nian!!
Anda bisa menentukan Arbitracy anchor links dengan nilai href khusus (misalnya Anda input nilai a href dengan #top) yang ketika diklik akan mengaktifkan script dan menggulung halaman website kembali ke atas. Dan logikanya jika nilai yang di-input adalah #bottom, tentu layar menggulung ke bagian paling bawah. Maka silahkan ber-improvisasi.
Untuk demo :
Gulir laman ke bawah (minimal 100 pixel) untuk melihat Stationer Kontrol "Back to Top" tampil di bagian sudut kanan bawah halaman webite.
Gulir laman ke bawah (minimal 100 pixel) untuk melihat Stationer Kontrol "Back to Top" tampil di bagian sudut kanan bawah halaman webite.
Important Note:
Halaman Anda harus berisi DOCTYPE yang valid di bagian paling atas agar script ini bekerja sebagaimana dimaksud.
Halaman Anda harus berisi DOCTYPE yang valid di bagian paling atas agar script ini bekerja sebagaimana dimaksud.
Petunjuk yang disarankan
Step 1
Buka platform blogger blogspot dengan ID Gmail untuk membuka HTML editor.
Buka platform blogger blogspot dengan ID Gmail untuk membuka HTML editor.
Step 2
COPY script dalam box orange dibawah ini dan PASTE ke bagian tag <HEAD> pada halaman HTML (misalnya, diletakkan pada baris persis di atas </head>).
COPY script dalam box orange dibawah ini dan PASTE ke bagian tag <HEAD> pada halaman HTML (misalnya, diletakkan pada baris persis di atas </head>).
Catatan :
Mohon maaf jika script saya tampilkan sebagai image dan script tampak kurang jelas (untuk mengurangi beban load time blog ini). Jika tidak ingin capek mengetik sendiri script seperti terlihat pada gambar di bawah ini, download saja file script yang bersangkutan dengan klik link berikut ini :
Copy saja script pada isi file hasil download dan manfaatkan (Paste) untuk step 2.
Step 3
Klik PREVIEW untuk view hasil sementara. Bila OK klik SAVE.
Klik VIEW BLOG untuk lihat hasilnya.
Klik PREVIEW untuk view hasil sementara. Bila OK klik SAVE.
Klik VIEW BLOG untuk lihat hasilnya.
Anda dapat menyesuaikan berbagai hal, seperti berapa kali scroll diperlukan untuk menggulir ke bagian paling atas, durasi fade in / out berlaku untuk stasioner kontrol. Dalam file js ini, ada bagian relevan untuk memodifikasi :
setting: {startline:100, scrollto: 0, scrollduration:1100, fadeduration:[500, 100]},
controlHTML: '<img src="http://www.dynamicdrive.com/dynamicindex3/up.png" style="width:24px; height:24px" />', //HTML untuk kontrol, yang otomatis dibungkus DIV w/ ID="topcontrol"
controlattrs: {offsetx:16, offsety:16}, //offset kontrol relatif ke kanan / bawah pojok jendela
anchorkeyword: '#top',
//Anda input nilai href anchor HTML yang juga bertindak sebagai link "Scroll Up"
controlHTML: '<img src="http://www.dynamicdrive.com/dynamicindex3/up.png" style="width:24px; height:24px" />', //HTML untuk kontrol, yang otomatis dibungkus DIV w/ ID="topcontrol"
controlattrs: {offsetx:16, offsety:16}, //offset kontrol relatif ke kanan / bawah pojok jendela
anchorkeyword: '#top',
//Anda input nilai href anchor HTML yang juga bertindak sebagai link "Scroll Up"
Stasioner Kontrol dengan URL http://www.dynamicdrive.com/dynamicindex3/up.png (Grey arrow scroll up diatas) bisa diganti dengan URL gambar lain. Misalnya dengan URL image https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQj6054_2bAnqGbOEswwVV_jPvcKx-4dT6tvClLuf9r3DMbiwzTB18lP0CvTsyC0HYpXdxNJ0qGHX_zGC_n8ZglB5nPd1GvwmDleegH-GiA01KY4kAS1sMwj5rnBPXdtiyLp8YYNM5Vo7/?imgmax=800 (LIHAT Orange Arrow scroll up pada gambar awal artikel ini).
Untuk "
control-HTML" dapat memasukkan HTML Jika ingin ditampilkan sebagai kontrol, meskipun harus sebagai sesuatu yang sederhana (gambar atau plain text). Setting "anchorkeyword" mengizinkan Anda memasukkan nilai href dari HTML anchors (jika ada).
Untuk melihat hasilnya, klik link ini Back to Top
Pengubahan arah target "Scroll To Top" Control
Secara default ketika Anda mengklik tombol Control, maka scroll halaman akan kembali ke bagian paling atas. Namun, Anda dapat mengubahnya, misalnya 50 pixel jaraknya dari bagian paling atas, atau scroll ke elemen tertentu pada halaman, yang bukan header. Pengaturan untuk mengubah “Scrolltop” ada dalam bagian dari file .js dibawah ini (sebagai contoh saya sesuaikan dengan kinerja yang dinginkan di blog saya)
- setting: {startline:100, scrollto: 50, scrollduration:1500, fadeduration:[550, 150]},
Ubah nilai 0 (misal menjadi 50, begitu juga untuk nilai varaiabel lain), atau ID elemen tertentu yang ingin Anda kontrol, seperti "myheader" dimana "myheader" adalah elemen yang didefinisikan pada halaman, seperti :
<h2 id="myheader">Welcome to Dynamic Drive!</h2>
Untuk widget Scroll to Top dan sekaligus juga dilengkapi Scroll to Bottom, silahkan kunjungi post ini :
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqz1Fz0W3QZkeG4LsKvQplfCdmyhCrU3j95NWl1i-XarshrBBaYCr4hKUMKj5XbhHwJRvEFMd3j2pDLZepCzvjQU0kMiNhvbs51qAWczA_Mrw7y_wj0czorZsxBhfr9Y5Q8IN_vsORSA/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
