Sedikit Info Seputar Memasang Tombol Back to Top Simple di Blog Terbaru 2017 - Hay gaes kali ini team Fiber Android, kali ini akan membahas artikel dengan judul Memasang Tombol Back to Top Simple di Blog, kami selaku Team Fiber Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Fiber Android. semoga isi postingan tentang Artikel Blogging, Artikel Tips Blogger, Artikel Widget, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Memasang Tombol Back to Top Simple di Blog Full Update Terbaru
link: Memasang Tombol Back to Top Simple di Blog

Artikel Terbaru Memasang Tombol Back to Top Simple di Blog Update Terlengkap 2017

Tombol ini berfungsi untuk mengembalikan ke halaman paling atas tanpa perlu di scroll/hanya membutuhkan satu klik saja, tetapi untuk yang sudah tau pasti sudah tidak asing lagi dengan tombol ini.

Memasang Tombol Back to Top Simple di Blog

Sobat masuk ke menu Tata Letak, kemudian klik Tambahkan Widget dan klik HTML/Javascript lalu salin dan terapkan kode di bawah ini di dalamnya.

<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: 'https://3.bp.blogspot.com/-vFaOvYveBI4/V-SwdTtnIyI/AAAAAAAAAOw/xOj8S00-NJocRXVzzt2-Xyg6-0Hp-sUbACLcB/s1600/backtotop.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>

Terakhir simpan widget dan lihat hasilnya.

Demikian artikel kali ini, kalau sobat punya pertanyaan/saran sobat bisa meninggalkan komentar, selamat mencoba semoga bermanfaat.

Itulah sedikit Artikel Memasang Tombol Back to Top Simple di Blog terbaru dari kami

Semoga artikel Memasang Tombol Back to Top Simple di Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Fiber Android. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Artikel Tentang Memasang Tombol Back to Top Simple di Blog

Info Tentang Memasang Tombol Back to Top Simple di Blog Update Terbaru 2017 Gratis

Artikel Terbaru Memasang Tombol Back to Top Simple di Blog Update Terlengkap 2017

Itulah sedikit Artikel Memasang Tombol Back to Top Simple di Blog terbaru dari kami