JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<a id="linkToTextBox" class="jumpToLink" href="#RoadFundLicence">Go to Road Fund Licence</a>

<br>
<a id="linkToConcertina" class="jumpToLink" href="#regFee">Go to Reg Fee</a>

<br>
<a id="linkToDropDown" class="jumpToLink" href="#ClassType">Go to Type/Class drop-down</a>

<section class="accordion-group">
    <div class="accordion-heading">
         <h4>
                <a id="vehicleConcertinaHeading" data-toggle="collapse" href="#vehicleConcertina" class="accordion-toggle">
                    <i class="icon-collapse icon-white"></i>CADDY MAXI C20 1.6 TDI 102PS KOMBI VAN
                </a>
       </h4>

    </div>
    <div id="vehicleConcertina" class="accordion-body collapse in">
        <div class="accordion-inner" data-bind="if: Loaded">
            <div class="accordion-content">
                <div class="row-fluid">
                    <div class="control-group span3">
                        <label class="control-label" for="ClassType">Type &amp; Class:</label>
                        <select id="ClassType" class="input-block-level">
                            <option value="">New LCV</option>
                            <option value="">New Passenger Van</option>
                        </select>
                    </div>
                    <div class="control-group span3" data-bind="visible: !IsQuoteForNewVehicle()" style="display: none;">
                        <label for="VehicleRegistrationNumber" class="control-label">Registration number:</label>
                    </div>
                </div>
                <section class="accordion-group">
                    <div class="accordion-heading">
                         <h3>
                                <a id="feesContainerHeading" class="accordion-toggle collapsed" data-toggle="collapse"...

CSS

.space {
    height: 2000px;
    background: gray;
}

JavaScript

$(function () {
    $(".jumpToLink").click(function (e) {
        var $targetElement = $($(e.target).attr("href"));
        if ($targetElement && $targetElement.position()) {
            var newPosition = $targetElement.position().top;
            console.log(newPosition);
            if ($targetElement.hasClass("collapse")) {
                $targetElement.collapse('show');
            }

            $targetElement.parents(".collapse:not(.in)").collapse('show');


            $("html, body").animate({
                scrollTop: newPosition
            }, 100, function () {
                // Animation complete.
                $targetElement.focus();
            });
        }

        return false;
    });
});