- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
og体育首页ONE Subscrioption
ScrollTo Effect
November 15, 2010
This script is a small, customizable plug-in that allows scrolling elements of the web page or web page window itself.
JavaScript
In order to make the script work, the index-#.html file with a scroller should contain these lines of HTML code in order to include jquery.ScrollTo.js script and jQuery framework:
The section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:
Main ready() function is quite simple to understand and works for the whole page. We just set that on clicking an element ( tag) with .nav > li a.q1 class the page will animate to an element with #home id. scrollTo() function has two settings: target position and attributes. Here script attributes define the following values:
• axis: – axis to be scrolled (could be x, y, xy, yx);
• duration: – length of the animation, none (sync) by default;
• queue: – if true and both axes are scrolled, it will animate on one axis, and then on the other (note that axis being xy or yx, concludes the order).
There are many different ways to specify the target position.
These are:
• a raw number;
• a string(‘ 44′, ‘ 100px‘, ‘ +=30px‘, etc );
• a DOM element (logically, child of the scrollable element);
• a selector, that will be relative to the scrollable element;
• the string ‘ max‘ to scroll to the end;
• a string specifying a percentage to scroll to that part of the container (f.e: 50% goes to to the middle).
HTML
Below you can see the general HTML script representation (page blocks):
Next you can see a bulleted list ( tag) with the with the links to correspondent blocks. class attribute the links ( tags) sets which element to scroll to:
