cara membuat tombol kembali keatas di blog

Memasang tombol kembali ke atas di blog | Pada kesempatan yang lalu, tepatnya beberapa hari yang lalu saya share tentang cara membuat daftar isi di blog. Saya baru sempat update lagi berhubung adanya kesibukan di tempat PKL sehingga blog ini kurang terurus, tapi alhamdulillah ada kesempatan untuk update blog. 
Pada postingan ini, saya sekedar berbagi tombol kembali ke atas yang saya terapkan di blog saya ini dengan efek scroll dan juga auto hide. Langsung saja caranya sebagai berikut:
  1. Pada dashboard blog, pilih tata letak.
  2. kemudian pilih tambah gadget
  3. pilih HTML/Javascript
  4. Kemudian copy kode di bawah ini dan paste pada koloh HTML/javascript tadi
  5. <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/AVvXsEgDicD3S1xiUUipjQjx6Cq-zfxK9mp6digJRvf3uR8ZMZHKGQ6oxtkGxwcWKrxxezd7npkzoimfJGZYKnaTKLYyYJ-kcUmvM3yZdHT9XZ126Ibo9xpl0snuYxsmcfqLxgwYhQ5-u9Cd48s/s400/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:'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>
  6. Simpan
Silahkan ganti link image yang berwarna biru di atas dengan gambar anda. Jika anda ingin gambar back to top silahkan kunjungi link ini.
Sekian dan wassalam

16 komentar:

  1. trimakasih tutorialnya sobat, ane save dulu, siapa tahu nanti minat pasang:}

    BalasHapus
  2. nah.. ini yang pake Jquery itu kan.. :D oke dehh :D

    BalasHapus
  3. benar-benar banyak manfaat dan ilmu yang bisa didapat dari super blog ini :)

    BalasHapus
  4. wah, ijin copy yak sob :D

    BalasHapus
    Balasan
    1. silahkan..
      kalau bisa linknya juga di ikutin ya, tapi kalau tidak bisa tidak usah..

      yang penting share..

      Hapus
  5. nice tutorial... heemm penasaran pengen mencobanya.

    BalasHapus
  6. . . kalo bikin tombol balik ke atas n ke bawah ada gak?!? . .

    BalasHapus
  7. dulu saya pernah pasang sob back to top

    BalasHapus
  8. ana minta ijin copy dulu artikelnya sob, bertanda tengah malam ....

    BalasHapus
  9. pernah pasang juga di blog tombol back to top sobat, tapi uda saya copot kembali sobat, heheheh

    BalasHapus
  10. terima kasih tutorialnya izin copas untuk saya pasang di blog
    salam kenal buat semua sahabat disini

    BalasHapus