November 21, 2011

Tutorial: Jquery Top Button


/Assalamualaikum wbt,

I'm sooooo sleepy but this is my last tutorial for the day. Okay, jquery top button is almost similar to the normal top button, but this one, instead of instantly goes up, it will go slowly. How amazing is that?! Let's begin.

Design, Edit HTML, Tick Expand Widget Template

Ctrl+F then search for this code


</body>

 Copy this code above the previous code.
<a href='#' id='toTop'><center>YOUR WORDS<span class='Apple-style-span' style='color: rgb(255, 204, 204); '/></center><img src='CUTE TOP BUTTON ICON URL?t=1292762029' style='border:0;'/></a>
Edit whatever you want. Now search for this code. Omg I'm spent!


]]></b:skin>

Copy this code above the previous one.

/* 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; }
LAST! Search for this one.

</head>
And then, copy this code above the code that you searched.

<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>
 Sikes! You're done! Click Save Template.

That's long. Now good night. Lots of love.

cc: Una



No comments:

Post a Comment

~ Mind your words. I ain't dealing with rude people. ~