Cara membuat menu/tombol back to top dengan jquery. ~ SOFtwareTEKnologi Go 2 Blog Tutorial
Selamat datang Di Softekgoblogtutorial

Sabtu, 08 Desember 2012

Cara membuat menu/tombol back to top dengan jquery.

Kali ini kita akan membahas tentang bagaimana cara membuat sebuah menu atau tombol (Back to Top) atau tombol kembali keatas, dimana tombol ini berfungsi saat pengunjung web atau blog anda telah berada di halaman paling bawah dan ingin kembali menuju ke atas. Oke kita akan memulainya dengan sebuah script Jquery, dimana script ini dapat meng scrool halaman kembali keatas dengan sangat smooth..  Lihat demo di bawah kanan halaman ini.

Langkah Pertama; Seperti biasa buka dashboard blog anda, lalu menuju ke tata letak...Eiitss....kenapa ketata letak bukan ke template? Ya karena script sederhana ini dapat running seperti sebuah widget pada umumnya. Langkah Kedua; Tambah Gadget, pilih html/javascript kemudian........copas dech...copy pake es...brrr....enak...copas script dibawah ini;

<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/AVvXsEiz__zcMJnJ7CTuV70srDYwghuF34HRH3OpGEVnYDtjHSZWLq6EGh39jD8Fagy6pwz6YnrxpkUI5YjpYSo3sdyx1LV5aMDz7NLEnytnJGIPOEh2uWrfV9YJbMJXYoF1d2VKI2tfiLa6IB8/s400/Back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //jarak ke kanan / bawah 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:'Kembali ke Atas'}) .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>
Langkah ketiga ; simpan dech setelah anda copas, lalu lihat hasilnya. Klo sudah oke baru kasih jempol..okey... Langkah keempat ; Angkat pantat anda dari kursi ini, pergi cari gorengan...enak sore-sore gini sambil ngopi...ngeblog makin asyiik....makin betah dech nambah ilmu disini sambil baca-baca.. Warning; jangan pake headphone sambil denger lagu, kadang samar klo lagi kentut ga kerasa gede banget (klo maen di warnet or hotspot) hehhehhheeeee......ntar banyak yang liat...

Comments
0 Comments

Posting Komentar

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( :-q =))

Be Nice to comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More