Membuat Tombol Back To Top Sederhana

Membuat Tombol Back To Top Sederhana

Monday, March 14, 2011

Share this history on :

Share

0digg

Back to top adalah sebuah link atau tombol yang biasanya di simpan di bagian footer sebuah blog yang ketika di klik akan kembali ke bagian atas/header. Namun kali ini saya tidak membuat tombol back to top di bagian footer, melainkan di bagian tengah atau center postingan, tombol ini tidak dilengkapi dengan jQuery sehingga tampilannya agak kasar. Tombol ini bisa berupa tulisan maupun gambar, tergantung keinginan sobat, berikut ini screenshot dari tombol back to top.

Jika sobat berminat, ikuti langkah-langkah berikut ini :

1. Masuk ke blogger;
2. Klik Perancangan lalu klik Elemen Laman;
3. Pilih Tambah Gadget;
4. Pilih HTML/javascript;
5. Kemudian masukkan atau pastekan kode berikut :

<script type="text/JavaScript">
var topMargin = 300
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)

function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}

function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}

}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}

}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" width="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDmVk-og115LBcpWqkAd7hxxiJCd-4hhZ95O__UyzrqWIsMhuJHHNT_sADGRocyLWJGJIs3ObPvkwK-4bHD-8HEUk0fgYiePUbyVa1c34I732AbChzPRpMVFBOhSPkN1Jr_faedLjzOgXa/s320/up_out.gif" height="25"/></a></div>

6. Gantilah kode warna merah dengan url gambar sesuai keinginan sobat (usahakan ukuran gambar tidak terlalu besar agar tidak memenuhi dan menghalangi pengunjung untuk membaca postingan sobat);
7. Kemudian simpan template sobat dan lihat hasilnya.

Selamat mencoba, semoga berhasil.

Source » http://www.wakrizki.net/2011/03/membuat-tombol-back-to-top-sederhana.html#ixzz1opc3dQNR