• semiar topics

    Read More
  • mini projects

    Read More
  • main projects

    Read More
  • old question papers

    Read More

JQuery Smooth Scroll to Top



A must have script for every website, this JQuery Scroll to top plugin makes easy to scroll up the pages of your website. It is very harder to scroll up the whole page while using your website, this 'Scroll to Top' script makes easier to navigate your Websites pages. The main purpose of the Scroll to top script is makes the navigation easier. So i will explain about such a nice script....

Jquery Scroll to Top

Steps

Step 1: For Smooth working of this plugin we need one css file and three JavaScript files. We using JQuery for work this plugin and the version is 1.7.2

Step 2: CSS codes for Scroll to Top Script

#toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:100%; background:url(../img/ui.totop.png) no-repeat left top; } #toTopHover { background:url(../img/ui.totop.png) no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus { outline:none; }

Step 3: Next step is use this code in your webpage for this we need to add some codes on head section of your page

<link rel="stylesheet" media="screen,projection" href="css/ui.totop.css" /> <!-- jquery --> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <!-- easing plugin ( optional ) --> <script src="js/easing.js" type="text/javascript"></script> <!-- UItoTop plugin --> <script src="js/jquery.ui.totop.js" type="text/javascript"></script>

Step 4: One more Script is needed for start the plugin. Add this code to your <body> Code </body> section.

<script type="text/javascript"> $(document).ready(function() { /* var defaults = { containerID: 'toTop', // fading element id containerHoverID: 'toTopHover', // fading element hover id scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script>

Step 5: The image used Here is scroll to top If you have any question feel free to ask in comment section........






Download Link beloew :





Demo   Download Now









comments powered by Disqus