{# Template : Scoll Page #}

{% extends 'chop/layouts.twig' %}

{% block content %}

    <div class="wrapper">

        <div class="scrollTests">

            <ul>
                <li><a href="#js_divTarget" class="js_scrollLink button">Click me (a link using anchor)</a></li>
                <li><a href="" target="_blank" class="js_scrollLink button">Click me (Just a normal link)</a></li>
                <li><a href="#js_divTarget" class="js_scrollLinkEase button">Different Animation (this expands jQuery animations, so any available can be used)</a></li>
                <li><a href="#js_divTarget" class="js_scrollLinkOffset button">This one has an offset</a></li>
                <li><a href="#js_divTarget" class="js_scrollLinkSpeed button">This one is really slow</a></li>
                <li><a href="#js_divTarget" class="js_completeCheck button">This one has a callback on complete</a></li>
                <li><a href="#js_divTarget" class="js_completeCheckSlow button">Complete, but slower!</a></li>
            </ul>

            <p>Below is the change functionality, select, radio, etc</p>

            <div class="row">
                <select class="js_scrollChange">
                    <option>Select One</option>
                    <option value="#js_divTarget">Take me there!</option>
                </select>
            </div>

            <div class="row customRadio">
                <input type="radio" id="radioBox" name="radio" class="js_radioScroll" value="#js_divTarget">
                <label for="radioBox">Click me!</label>
            </div>


            <div id="js_divTarget" class="divTarget">
                Here!

                <a href="#header" class="goBackUp js_scrollLink button">
                    Go back up
                </a>
            </div>

        </div>
    </div>

{% endblock %}