This script is a small, customizable plug-in that allows scrolling elements of the web page or web page window itself.<\/p>
JavaScript The <head><\/strong> section of the index-#.html<\/strong> file contains these lines of code that initialize the script functionality with basic values:<\/p> Main ready()<\/strong> function is quite simple to understand and works for the whole page. We just set that on clicking an element (<li><\/strong> tag) with .nav > li a.q1<\/strong> class the page will animate to an element with #home<\/strong> id. scrollTo()<\/strong> function has two settings: target position and attributes. Here script attributes define the following values:<\/p> \u2022 axis:<\/strong> – axis to be scrolled (could be x, y, xy, yx<\/strong>); There are many different ways to specify the target position. \u2022 a raw number; HTML<\/strong> Next you can see a bulleted list (<ul><\/strong> tag) with the with the links to correspondent blocks. class<\/strong> attribute the links (<a><\/strong> tags) sets which element to scroll to:<\/p>","protected":false},"excerpt":{"rendered":" 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 <head> section of the […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[263],"tags":[813],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1756"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1756"}],"version-history":[{"count":5,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1756\/revisions"}],"predecessor-version":[{"id":85738,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1756\/revisions\/85738"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/strong> In order to make the script work, the index-#.html<\/strong> file with a scroller should contain these lines of HTML code in order to include jquery.ScrollTo.js<\/strong> script and jQuery framework:<\/p>
\u2022 duration:<\/strong> – length of the animation, none (sync) by default;
\u2022 queue:<\/strong> – if true<\/strong> and both axes are scrolled, it will animate on one axis, and then on the other (note that axis<\/strong> being xy<\/strong> or yx<\/strong>, concludes the order).<\/p>
These are:<\/p>
\u2022 a string(‘ 44′<\/strong>, ‘ 100px<\/strong>‘, ‘ +=30px<\/strong>‘, etc );
\u2022 a DOM element (logically, child of the scrollable element);
\u2022 a selector, that will be relative to the scrollable element;
\u2022 the string ‘ max<\/strong>‘ to scroll to the end;
\u2022 a string specifying a percentage to scroll to that part of the container (f.e: 50% goes to to the middle).<\/p>
Below you can see the general HTML script representation (page blocks):<\/p>