Senin, 02 November 2009

Penerapan jQuery Scroll to Top Control

Dulu saya pernah membahas bagaimana cara membuat "Back To Top" dengan methode yang saya dapatkan dari www.dynamicdrive.com. Adapun penyimpanan file scrolltopcontrol-1.js di www.geocities.com, mengingat sekarang situs tersebut sudah tidak melayani upload gratis dan saya juga tidak punya dollar untuk membayar sewanya maka saya harus mencari solusi bagaimana penerapan jQuery Scroll to Top Control pada Blogger tetap berfungsi. Mengingat penerapan kode ini telah aku terapkan pada blogku yang lain, jadi saya harus berusaha bagaimana kode tersebut tetap berjalan mulus sehingga saya tidak perlu membuangnya.
Seperti biasanya pengeditan kode ini berada pada "Tata Letak" langsung menuju pada edit HTML. Tanpa mencentang "Expand widget templates" tambahkan kode dibawah ini diatas kode </ head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

/***********************************************
* Scroll To Top Control script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>

<script type='text/javascript'>
//<![CDATA[

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://i288.photobucket.com/albums/ll179/ahnning/up.png" style="width:48px; height:48px" />', //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>

Jika anda mempunyai variasi dari Icon "Back To Top", silahkan ganti URL img yang ada pada kode dibawah ini dengan URL anda.

controlHTML: '<img src="http://i288.photobucket.com/albums/ll179/ahnning/up.png"

Jika penerapan kode belum berhasil, cobalah ENCODE kode tersebut diatas.
Posting ini sekaligus merevisi posting tentang jQuery Scroll to Top Control.

6 komentar:

Posting Komentar

Silahkan berikan komentar yang bersifat membangun, admin akan menghapus komentar yang bersifat SPAM

 
Copyright @ 2009 CoretanAsal: Penerapan jQuery Scroll to Top Control | Original Template: MINIMA| Modified By NATALUDIN | Top
Thanks for : BLOGGER | PHOTOBUCKET | PICASSA