Memasang Tombol Back to Top

Tujuan membuat tombol back to top dalam blog adalah agar para pengunjung blog merasa lebih mudah untuk kembali ke bagian atas blog kita. Walau mereka bisa kembali ke bagian atas blog dengan cara menggulung scrool namun dengan adanya tombol back to top ini akan lebih mempermudah, yaitu cukup dengan satu klik saja, maka mereka langsung di bawa ke bagian atas blog kita.

Untuk membuat tombol yang kita maksud, kita hanya membutuhkan 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/AVvXsEgYESRLanK7WNk4l3z2O4JW131dSp3mlT1X2ldpTY7yddwJZ7nlhaoaTv9vv2XGEnOvsvQE73kQdToqn0wpvMM5IaUvL4lPfBF9_qRjg9bKXB8fp2TfMv_TFu3G1fS7ANTXOKB62l-TzoCe/" height="25"/></a></div>

Cara memasangnya seperti biasa, login ke blogger >> Tata letak dan Tambah Gadget HTML. bagi teman-teman yang ingin mengganti gambar back to top, maka bisa diganti link yang berwarna seperti ini. tampilan dari link gambar di atas adalah seperti berikut ini:





Di atas adalah kode dan langkah-langkah untuk memasang tombol back to top yang letakknya mengikuti gerakan scroll browser, selanjutnya bagi teman-teman yang ingin memasang tombol back to top melayang/berada di kanan slalu (bisa diatur letaknya, NB ==> kode yg tlah saya sediakan di bawah ini sudah diatur untk tampil di bagian kanan bawah), maka tman2 bisa memperaktekkannya melaui langkah-langkah berikut:

Login ke blogger >> Tata Letak >> Edit HTML

Kemudian letakkan kode berikut tepat di bawah kode </Body>

<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYESRLanK7WNk4l3z2O4JW131dSp3mlT1X2ldpTY7yddwJZ7nlhaoaTv9vv2XGEnOvsvQE73kQdToqn0wpvMM5IaUvL4lPfBF9_qRjg9bKXB8fp2TfMv_TFu3G1fS7ANTXOKB62l-TzoCe/'/></a>

Tampilan:





Simpan hasil kerjaan anda!




Nb:

Teman-teman juga bisa memilih beberapa gambar back to top berikut ini

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYsmPEojT5UuOB6xpVBIilzRk1wJXaU3UJTxQxCaL5qYm4A6RJIXgExOGsC6DSeXXR83NFruhw2vcJ3Sdb0cx_BIJrz-NW7mIyXAINSImbRrKLUlbVx62OzfJXmmmiK9q665HQgtWbSyv4/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrF4YUIMR99Yp-vBZeoO1pth20imuJqb5jO9ckT3r2CjE6LDNMdqO-vfnDktBP457jz54Jid9Op2gXrUM_ukVyImi1FGoR7waAaYJJEpxW0FY-1EIFiCzqODlLAJlrdQPsnynNn-Eh-EdU/

Semoga Bermanfaat

Penulis : IKHLASIKHSANALYA ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Memasang Tombol Back to Top ini dipublish oleh IKHLASIKHSANALYA pada hari 21 July 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Memasang Tombol Back to Top