Anchor to element within hidden div

Stackoverflow

by Ashok Gupta

HTML

<a class="nameLink" href="#hidden" >Link to anchor within hidden div</a>

<h2><a id="f-hdr" href="javascript:void(0)">Div Header</a></h2>
<p class="dummy-height"></p>
<a name="jumphere"></a>
<div id="hidden" >
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p id="anch">Person I'm looking for</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
<p>person</p>
</div>

CSS

p {color:#000;}
#hidden{display:none}
.dummy-height{height:600px; background-color:#999;}

JavaScript

$(document).ready(function(){
    $("#f-hdr").click(function(){
        $("#hidden").toggle(1000);
    });
    $(".nameLink").on('click', function(){
				var thisParagraph  = $($(this).attr('href')).show().find("p:contains('Person I\\'m looking for')"); 
				console.log(thisParagraph.offset().top);
        $('body').animate({scrollTop:thisParagraph.offset().top});
    })
});