24.12.13
52
 Gambar Membuat Tombol Back To Top Efek Scroll
Cara Membuat Tombol Back To Top efek Scroll - Tombol Back To Top yang biasanya berupa gambar panah menuju keatas yang terletak dibawah blog merupakan salah satu widget yang dapat membantu pengunjung untuk lebih mudah kembali keatas halaman page. Dengan Membuat Tombol Back To Top (Kembali Ke Atas) sangat membantu untuk bergerak cepat kembali pada artikel yang diatas, sehingga kita tidak perlu lagi menggunakan fungsi scroll mouse untuk melihat halaman yang telah terlewat.
Nah..!! jika saat ini anda berada pada halaman komentar dan ingin melihat atau membaca ulang artikel yang anda kunjungi, cukup KLIK Tombol Back To Top, maka anda akan diarahkan kehalaman Title Judul Blog atau Header.
Akan tetapi kalau artikel blog  cukup pendek mungkin Tombol Back To Top (Kembali Ke Atas)ini sedikit tidak berlaku, namun jika terkadang artikel blog  kita cukup panjang tentu Tombol Back To Top sangat dapat membantu.

Sebelumnya diartikel SAHABAT BLOGGER 77 telah kita share Tips Mudah Membuat Tombol Share Di Blog, Berikut Cara Membuat Tombol Back To Top Efek Scroll
  1. Log in to akun Blogger
  2. Tata letak >>> tambahkan Gadget
  3. Copy kode berikut lalu Paste pada HTML/JavaScript
Kode script I - Cara Membuat Tombol Back To Top Efek Scroll Lembut
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOX868Vuqujubb6A2FxOisK4Osvy3xn4w-rKQbnu-o-_WeiB-TK72h0uDHRly-Ghg7_RxQZ8X2hl7qQVUDtjDNTPeCX3h8Pku6UbJgGRiUmVui5MlOXCbtcwOjPG3tomYocL0moDd3IBk/s1600/TO-TOP.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //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:'Scroll Back to Top'})
.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()
</script>

Kode script II - Cara Membuat Tombol Back To Top Efek Scroll Cepat
<br /><script type="text/javascript">
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.MyBloggerTricks.com
* Republish by http://sahabatblogger77.blogspot.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
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://i1198.photobucket.com/albums/aa452/Lutfi14/back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
   controlattrs: {offsetx:5, offsety:5}, //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:'Back to Top'})
               .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()
</script>

Keterangan - Silahkan sesuaikan gambar Tombol Back To Top dengan selera anda, ganti kode yang berwarna MERAH dengan Url gambar berikut :
Gambar Widget Tombol Back To Top
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEZsIZNZpeNdr9gmBwemQMu1jXICTR9xdOOLpCUKv9VikUkh_lYKoI2Z2Y3x4x8ftk2uUc4PJvZSAzfJbZ7R2lyJl_XbCs3Rpgc9IfhTovrj_bcX1cNjQShMSGt8I7Lpusp5k1eFjFfkQx/s1600/back+to+top10.gif

Gambar Widget Tombol Back To Top
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0VXW5kgELYHabl_Aggnm6MurXzAUirTOR7OR63qpC-r_6P1RjoQ7JuZjz95wlOB6c3INJh4QnAvqlxMu9ly_WHFL2cXHYN4RBRFXkZolv5C52yINFtZrzQg4g2nGNXJox6JaT9KzcXSuU/s1600/back+to+top14.png

Gambar Widget Tombol Back To Top
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFtBM4Yce6OSz8MX9bE006nbjF8jbQjrtQiDv38YJ0hUJJrc9_4_KbXXYeTUozFOyeJI7O575lOGiuBZWEiDRH9ZaXCbp3BZhawwGFLhTCAjMo5g5nxw2DVdkC061ZgltxToreKU3BI_8T/s1600/back+to+top15.png

Gambar Widget Tombol Back To Top
http://i1198.photobucket.com/albums/aa452/Lutfi14/back-to-top.png

Title : Cara Membuat Tombol Back To Top efek scroll
Next Title : Cara Melihat Jumlah Visitor Online Di Blog

= SELAMAT MENCOBA =

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Tombol Back To Top Efek Scroll
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

52 komentar

  1. wah bagus juga nih widget nya, jadi bisa memudahkan pengunjung untuk kembali ke halaman atas ya. izin praktek ya :)

    BalasHapus
    Balasan
    1. Silahkan sob dan Terimakasih sob atas kunjungannya,,
      salam kenal

      Hapus
  2. wihh bagus banget!!
    blog saya jadi makin keren lho
    terima kasih ya
    rakaraperz.blogspot.com (bukan link aktif)

    BalasHapus
  3. (h) Keren gan....
    Thanks atas infonya...!!! ditunggu kunjugan baliknya http://syekhsyihabuddinazmilumri.blogspot.com/

    BalasHapus
  4. terima kasih banyak sob atas infonya,
    http://si-kudil.blogspot.com/

    BalasHapus
  5. mkch yahh tutor'a udh aq pke d blog aq ne.. :)

    kunbal + follow'a dongse d blog aku.. >> rima-yunida.blogspot.com

    BalasHapus
  6. wahhh back to top yang saya pake ternyata dari blognya mbak devy :)

    BalasHapus
  7. >>>Terimakasih ya..untuk tutorialnya...sudah saya pasang di blog saya...berbagiyangbaik.blogspot.com

    BalasHapus
    Balasan
    1. terimakasih kembali mas,,semoga blognya semakin keren

      Hapus
  8. terima kasih mas, uda aku praktekkan di blog aku dan luar biasa keren...

    BalasHapus
  9. thanks info nya, langsung coba

    BalasHapus
  10. ijin copas gan.. wat blog tumblr.. and thanx infonya.

    BalasHapus
  11. thank gan sangat membantu =p~

    BalasHapus
  12. makasih mba atas ilmunyaa... (c)

    BalasHapus
  13. Beuh cuma tombol gitu doang kode script nya buanyakkk amat,, thank om sharenya...

    BalasHapus
    Balasan
    1. wah iya tuh banyak biiianggett.. heheeh

      Hapus
  14. ijin sedot ya . oh ya baclik dibawah sudah saya pasang mohon confrim

    dan salam kenal .

    www.onebisnisptc.com

    BalasHapus
  15. Mantapp gann , lagsung coba aja deh

    BalasHapus
  16. wow mantep sob (c) , kren lagi x-)
    silahkan lihat hasil cy di - http://animasigrafiscomputer.blogspot.com/ . . .
    hehe maklum baru jdi blogger :d

    BalasHapus
  17. Mohon ijin untuk praktek menambahkan tombol "back to top" ini sobat.
    Terima kasih sebelumnya, slam kenal dan salam blogger.

    BalasHapus
  18. hy cantik cara ganti posisinya gimana?

    BalasHapus
  19. Keren Kaka Izin Ke TKP Ya .. :)
    Lihat Hasilnya Jadi Keren :)
    adaadaajaniblog.blogspot.com

    BalasHapus
  20. thanks mas dah berhasil, keren

    BalasHapus
  21. Sampoerna gan :D thanks a lot 8-)

    BalasHapus
  22. makasih gan, mantap...!!!!
    gan, saya sudah pasang juga backlinknya, tlong mampir gan....
    terima kasih.....
    www.davincy86.com

    BalasHapus
  23. Owalah.. ilmu lagi nih dari mbab devi. makasih makasih.. :)

    BalasHapus
  24. thx beraat mbak devy..mantap..nih..ok.

    BalasHapus
  25. wah makasih bnyk yah jadi belajar banyak nih hehe ^_^

    BalasHapus
    Balasan
    1. sudah dapat teks terimaksih yang banyak mas, bagaimana kalau ucapan terimaksihnya diganti dengan es crim, boleh, hehehe.... :>)

      Hapus
  26. info ini yg saya cari-cari, terimakasih gan ...

    BalasHapus
  27. Saya juga sudah pasang.. Terima kasih.

    BalasHapus
  28. keren nih jd lebih simple :)

    BalasHapus
  29. terima kasih bos udah mau berbagi :)

    BalasHapus
  30. wah mba, nice share yah.. hehehe :)
    main2 mba ke blog saya, sahabataldhy.blogspot.com
    saya blogger baru, mohon bimbingannya yah..

    BalasHapus
  31. terima kasih banyak mas,, ini yang saya cari,, salam sukses :)

    BalasHapus
  32. Mantap gan.....mau saya terapkan....maklum newbie..

    BalasHapus
  33. tes coba tombol back to top nya ya mbak, mmpung baru buat blog baru hehehe

    BalasHapus
  34. makasih.. artikelnya bermanfaat :)

    BalasHapus
  35. Thanks gan bermanfaat banget, kalo ada waktu mampir ya keblog ane di http://valenciaprdnrz.blogspot.com/ thanks gan

    BalasHapus
  36. Bagus banget, gak ribet n simple cuma 1 menit udah langsung terpasang, MANTAP...
    Makasih ya...
    Kalo lewat mampir ya....!! www.chalishashopjakarta.blogspot.com

    BalasHapus
  37. untuk mengatur title pada tombol gimana min caranya? Website Gratis

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK