jQuery Simple Example

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div class="header">
This is a fixed position header
</div>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis orci id nulla aliquet fermentum. Suspendisse ultrices nulla id magna cursus blandit.
</a>
</div>
</div>

<div class="col-md-4 p_link">
<a class="showSingle" data-target="2">
Sed feugiat fringilla lacus, quis aliquam turpis cursus eu. In dignissim ultrices tellus in convallis. Sed euismod tellus vel lorem
</a>
</div>

<div class="col-md-4 p_link">
<a class="showSingle" data-target="3">
suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris
</a>
</div>

<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="4">
ique sodales mi mi quis leo. Aliquam at eros vitae sem accumsan maximus. In non sapien faucibus, accumsan nisl eget, convallis 
</a>
</div>
</div>

<div class="col-md-4 p_link">
<a class="showSingle" data-target="5">
vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus.
</a>
</div>

<div class="col-md-4 p_link">
<a class="showSingle" data-target="6">
fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis
</a>
</div>

</div>

<div class="container p_content">

<div id="div1" class="targetDiv">
 posuere dapibus. In blandit, tortor quis laoreet lobortis, sem est auctor eros, ut vulputate augue felis nec massa. Pellentesque sagittis mi ac leo dignissim, sed semper augue hendrerit. Quisque scelerisque ante quis ullamcorper placerat. Cras in porta turpis. Proin turpis mi, posuere vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa....

CSS

.col-md-4{width:200px;background:red;clear:both;margin-bottom:10px;}
.p_content{clear:both;margin-top:300px;}
.header{background:green;height:50px;width:100%;position:fixed;text-align:center;}

JavaScript

jQuery(document).ready(function() {
  jQuery('.showSingle').on('click', function () {
    jQuery(this).addClass('selected').siblings().removeClass('selected');
    jQuery('.targetDiv').hide();
    var selector = '#div' + jQuery(this).data('target');
    jQuery(selector).show();
    var target = jQuery(selector);
    $('html, body').stop().animate({
            'scrollTop': target.offset().top-40
        }, 900, 'swing', function () {
            window.location.hash = selector;
        });
  });
});