Welcome to my blog. Feel free to read my stories and etc. I rarely update this blog. Sixteen.


home. | le owner. | stuff. | affiliates. | flavors. | chatbox.

Selasa, 4 Oktober 2011

JQuery Scroll Top Button

Assalamualaikum

3631_large

Ya Allah, sedapnye nutella ne, kalau lah aku dapat makan kan bagus,. Meleleh air liur aku.,,

Tuto ni direquest oleh Fiqa.

Hari ni Farahin nak wat tuto Back To Top macam saye punye. Tapi korang tekan button tu, nanti dye scroll ke atas kan?? Tulah dye!

1. Dashboard > Design > Edit HTML

2. Cari kod </body>

3. Copy kod di bawah. Paste kod tu sebelum </body>

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

URL image top button tu ambik url image korang sendiri. Kalau korang malas ambik button top ni haa.Muehheehe.


http://img529.imageshack.us/img529/1986/96133335.png

4. Belum siap lagi. Ctrl+F cari kod nih

]]></b:skin>

5. Copy kod bawah nih n paste kat 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. Step yg terakhir. HAHAA. Ctrl+F cari kod nih

</head>
7. Copy kod kat bawah ne n paste kat bawah </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> 


8. Save Template!

Cuba scroll. Kalau jadi cakap thanks :) Kalau x jadi bgitau sye keyh.

Credit to : Anis Diyana

Tiada ulasan: