Untitled


<!DOCTYPE HTML>
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Scroll to id - jQuery plugin demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- stylesheet for demo and examples -->
    <link rel="stylesheet" href="http://manos.malihu.gr/repository/page-scroll-to-id/demo/style.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
</head>

<body class="auto-layout">
    <header>
        <h1>Page Scroll to id - jQuery plugin demo</h1>
    </header>

    <nav id="navigation-menu">
        <ul>
            <li><a href="#section-1">Section 1</a></li>
            <li><a href="#section-2">Section 2</a></li>
            <li><a href="#section-3">Section 3</a></li>
            <li><a href="#section-4">Section 4</a></li>
            <li><a href="#section-5">Section 5</a></li>
            <li><a href="#section-6">Section 6</a></li>
            <li><a href="#section-7">Section 7</a></li>
        </ul>
    </nav>

    <div id="content">
        <section id="section-1">
            <div class="content">
                <h2>Section 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <hr /><a href="#" rel="next">Next section &rarr;</a>
            </div>
        </section>
        <section id="section-2">
            <div class="content">
                <h2>Section 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <hr /><a href="#top">&#8598; Back to start</a> <a href="#" rel="next">&#8601; Next section</a>
            </div>
        </section>
        <section id="section-3">
            <div class="content">
                <h2>Section 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <hr /><a href="#top">&#8598; Back to start</a> <a href="#" rel="next">Next section &rarr;</a>
            </div>
        </section>
        <section id="section-4">
            <div class="content">
                <h2>Section 4</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <hr /><a href="#top">&#8598; Back to start</a> <a href="#" rel="next">&#8601; Next section</a>
            </div>
        </section>
        <section id="section-5">
            <div class="content">
                <h2>Section 5</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <hr /><a href="#top">&#8598; Back to start</a> <a href="#" rel="next">Next section &rarr;</a>
            </div>
        </section>
        <section id="section-6">
            <div class="content">
                <h2>Section 6</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <hr /><a href="#top">&#8598; Back to start</a> <a href="#" rel="next">&#8601; Next section</a>
            </div>
        </section>
        <section id="section-7">
            <div class="content">
                <h2>Section 7</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <hr /><a href="#top">&#8598; Back to start</a>
            </div>
        </section>
    </div>

    <footer>
        <p>Page Scroll to id - jQuery plugin by <a href="http://manos.malihu.gr">malihu</a>. Plugin homepage: <a href="http://manos.malihu.gr/page-scroll-to-id">http://manos.malihu.gr/page-scroll-to-id</a>.</p>
    </footer>

    <!-- Google CDN jQuery with fallback to local -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="http://manos.malihu.gr/repository/page-scroll-to-id/demo/jquery.malihu.PageScroll2id.min.js"><\/script>')</script>

    <!-- Page Scroll to id plugin -->
    <script src="jquery.malihu.PageScroll2id.min.js"></script>

    <script>
        (function($){
            $(window).on("load",function(){

                /* Page Scroll to id fn call */
                $("#navigation-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
                    layout:"auto",
                    offset:10,
                    highlightSelector:"#navigation-menu a"
                });

                /* demo functions */
                $("a[rel='next']").click(function(e){
                    e.preventDefault();
                    var to=$(this).parent().parent("section").next().attr("id");
                    $.mPageScroll2id("scrollTo",to);
                });

            });
        })(jQuery);
    </script>
</body>
</html>