Saturday, September 3, 2011

[Tutorial] Jquery Top Button



Ada sorang budak comel nie, tanya yana kat efbee(fb) macam mana nak buat top button macam yana tu. \tengss :]/. Yang mula2 dia takde keluar pun, tapi bila kita scroll ke bawah baru keluar top button tu. Okeh. Meh sini yana nak ajar macam mana nak buat macam tu. Nak buat jquery top button macam nie ada banyak step. So, hati2 bila copy paste tu. Pastikan korang buat dengan betul. Takut nanti tak jadi pulak. :)

1. Dashboard > Edit HTML > Tick Expand Widget

2. Ctrl + F, cari code nie :
</body>

3. Dah jumpa? Copy code kat bawah nie and paste before code </body> tadi.
<a href='#' id='toTop'><img src='URL IMAGE TOP BUTTON?t=1292762029' style='border:0;'/></a>

4. Cari pulak code nie :
]]></b:skin>

5. Copy code kat bawah nie sebelum ]]></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. Lastly korang kena cari code :
</head>
Copy code kat bawah nie dan paste before </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><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 "Scroll to Top" 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("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() { $("#toTop").scrollToTop(); });
</script>

Then, korang save lah dan tengok hasilnya :)

\code warna purple tu korang boleh letak image url yg korang nak untuk top button korang :)/

Credit : >HERE< :)

No comments:

Post a Comment

Thanks for comment. Come again! ^_^