Tutorial : Jquery Button To Top





Assalamualaikum..
Salam 1 Malaysia..
hehehe~
ada yan tak tahu apa button JQUERY TO TOP tu kan?
actually dia sama je ngan button back to top yang biasa..
bila kite tekan button tu,kita akan naik ke atas..
tak payah nak skrol bagai..
tapi kalau yang JQUERY..
kita akan landing dengan smooth je..
hehe..
macam mia punye tu..
ce tekan?
slow je kan naik?
hehehe...

so?
let's begin dear !


1) Dashboard >> Template >> Edit html >> Proceed
2) Search code
</body>
3) Then,copy code dibawah ini dan paste DI ATAS </body>

<a href='#' id='toTop'><img src='URL BUTTON?t=1292762029' style='border:0;'/></a>

4) Search pulak code ni 
]]></b:skin>
5) Copy  code dibawah and paste ATAS ]]></b:skin>


/* to top */#toTop { width:100px;background:none;border:0px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }


6) Searching yang terakhir..hehehe..
</head>
7) Copy and paste ATAS </head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* Bring to you by Zen from http://zenplate.blogspot.com
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* Do not delete these infomation
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});
$(function() {
$(&quot;#toTop&quot;).scrollToTop();
});
</script> 

8) Preview..takde error,SAVE !!

Dah jadi jangan lupa bagitahu ye?? :) 



Kamoo Suke? Hit Like !

3 comments:

  1. debaekkkk :DD
    Done follow awak^^

    http://azlyiejah.blogspot.com/2012/10/segmen-cik-misya-nak-follow.html

    ReplyDelete
  2. okey le tu..tutorial
    btw,kak follow sini..:)

    ReplyDelete

Assalamualaikum...
Comment la..
At least 1 pon xpe..
Setiap komen yang korang berikan..
Memberi seribu makna..
:)