Membuat Tombol "Naik Keatas"

16:37 saktyambara

Tombol navigasi up / naik keatas halaman ini cukup membantu para pembaca artikel yang panjang kebawah. Dengan sekali klik saja kita langsung dibawa ke paling atas dimana umumnya menu kategori maupun menu halaman lainnya ditempatkan dalam suatu blog/web. Sebenarnya dengan mengklik tombol tengah/scroll dibagian halaman pada mouse kita bisa mendapatkan navigasi naik-turun bahkan kiri-kanan halaman. Tapi adakalanya kita memanjakan pengunjung sekaligus mempercantik web/blog kita dengan menambahkan tombol navigasi up/ke atas ini bukan? ups,, Bisa jadi dengan adanya tombol navigasi ke atas ini untuk menambah usia scroll mouse kita! hehe,,

Caranya sangat mudah dan sederhana, pemasangan tombol navigasi ke atas suatu halaman yang akan saya tampilkan berikut ini hanya dengan menambahkan java script yang bertugas menampilkan ikon (gambar kicil) di sudut kiri bawah browser saat scroll berada bukan di paling atas suatu halaman dengan efek fade. Saat di klik langsung menuju ke arah paling atas suatu halaman dengan sendirinya. Contoh kongkritnya penerapannya ya di blog ini, lihat bagian kiri bawah pada saat berada di bukan paling atas halaman.

Yang pertama adalah menyiapkan gambar dengan ukuran relatif kecil aja misal 52 x 32 pixel dengan format png/gif yang mendukung transparansi sebagai tombol navigasi keatas halaman. upload gambar tersebut di hosting Anda kemudian kita buat kode javascript navigasi up atau tombol keatas halaman dengan notepad aja bisa, copy script codenya:

var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://HostingMu/up.png" style="width:52px; height:32px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:55}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
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'})
.attr({title:'Ke Atas'})
.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()

Sesuaikan lokasi gambar serta ukurannya (warna orange tebal). Simpan dengan nama misal saja up.js, upload di yang dikehendaki. Misal di HostingKamu.com/js/up.js. jika sudah, panggil script tersebut di header web/blog Anda dengan menempatkan kode berikut diantara<HEAD> </HEAD> dalam template kita:

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

Sip! Simpel kan? jadi deh tombol navigasi ke atasnya. Nantikan tutorial blog ringan lainnya ya,, Selamat mencoba.