javascript - Preventing anchor tag jump for hidden divs -

i'm creating staff layout page, hidden divs appearing anchor tag , :target when staff member's picture or name clicked. however, default anchor jump behavior too... jumpy (edit: staccato , jarring user's eyes follow) work cleanly.

i've perused previous questions on topic, can't seem implement solution works.

this snippet i've been trying implement:

$(document).ready(function() {    var hash = window.location.hash;    var link = $('a');    $('a').click(function(e) {      e.preventdefault();      hash = link.attr("href");      window.location = hash;    });  });

.teamgrid {    display: inline-block;  }  .teamgrid .staffhidden {    background-color: rgba(0, 0, 0, 0);  }  .teamgrid .staffhidden p {    color: #000000  }  .teamperson {    width: 33%;    display: inline;    float: left;  }  .teamperson:first-child .staffhidden {    left: 0;  }  .teamperson:nth-child(2) .staffhidden {    left: -100%;  }  .teamperson:nth-child(3) .staffhidden {    left: -200%;  }  #janet,  #fred,  #shirley {    visibility: hidden;    overflow: hidden;    float: left;    position: relative;    max-height: 0px;    width: 569px;    background-color: #e9e9e9;    -webkit-transition: 1s ease-in-out;    -moz-transition: 1s ease-in-out;    -o-transition: 1s ease-in-out;    transition-property: max-height, visibility;    transition-duration: 1s, 0s;    transition-delay: 0.3s, 0s;  }  #janet:target,  #fred:target,  #shirley:target {    visibility: visible;    max-height: 600px;    border-bottom: 1px solid #000000;    margin: 4px 0px 4px 0px;    padding: 4px;  }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="teamgrid">    <div class="teamperson">      <p></p>      <a href="#shirley">        <img src="http://placehold.it/100x100" alt="" />          <h3>shirley</h3>        <p>founder</p>      </a>      <div id="shirley" class="staffhidden">        <p>lorem ipsum shirley lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam et mauris sagittis felis fringilla lacinia ut ac ipsum. in ac mollis sem. pellentesque fringilla felis vel rutrum dapibus. duis cursus sed magna et malesuada. etiam          auctor vestibulum diam, pretium molestie tortor ultrices nec. aliquam finibus maximus nulla, vitae tincidunt lorem molestie a. ut non dolor quis dui euismod bibendum. quisque eu diam sem. curabitur sed eros facilisis, facilisis elit sed, finibus          massa. nulla tincidunt vulputate ipsum non feugiat. donec elementum dui orci hendrerit tempus. cras egestas euismod risus in placerat. maecenas dictum, quam vitae varius malesuada, metus risus eleifend est, sit amet interdum est leo vitae urna.          suspendisse et nisi metus. in vestibulum mollis magna consequat. vivamus fringilla interdum tellus sit amet auctor. in hac habitasse platea dictumst. vivamus luctus massa. integer eget dui lacinia orci venenatis iaculis. curabitur facilisis          mi id interdum efficitur. etiam nulla ac augue molestie gravida. nullam non ligula sit amet tortor faucibus ultrices. curabitur consectetur commodo nulla, vel cursus augue consequat suscipit. aenean blandit libero in odio auctor lobortis. praesent          luctus felis erat mollis, sed volutpat urna faucibus. nam sed sem vel nisl mollis dignissim vel eget urna. nam semper nisi ut maximus iaculis.</p>      </div>    </div>    <div class="teamperson">      <p>        <a href="#fred" class="nojump">          <img src="http://placehold.it/100x100" alt="" />          <h3>fred</h3>          <p>president , coo</a>        </p>        <div id="fred" class="staffhidden">          <p>lorem ipsum fred lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam et mauris sagittis felis fringilla lacinia ut ac ipsum. in ac mollis sem. pellentesque fringilla felis vel rutrum dapibus. duis cursus sed magna et malesuada. etiam            auctor vestibulum diam, pretium molestie tortor ultrices nec. aliquam finibus maximus nulla, vitae tincidunt lorem molestie a. ut non dolor quis dui euismod bibendum. quisque eu diam sem. curabitur sed eros facilisis, facilisis elit sed, finibus            massa. nulla tincidunt vulputate ipsum non feugiat. donec elementum dui orci hendrerit tempus. cras egestas euismod risus in placerat. maecenas dictum, quam vitae varius malesuada, metus risus eleifend est, sit amet interdum est leo vitae            urna. suspendisse et nisi metus. in vestibulum mollis magna consequat. vivamus fringilla interdum tellus sit amet auctor. in hac habitasse platea dictumst. vivamus luctus massa. integer eget dui lacinia orci venenatis iaculis. curabitur            facilisis mi id interdum efficitur. etiam nulla ac augue molestie gravida. nullam non ligula sit amet tortor faucibus ultrices. curabitur consectetur commodo nulla, vel cursus augue consequat suscipit. aenean blandit libero in odio auctor            lobortis. praesent luctus felis erat mollis, sed volutpat urna faucibus. nam sed sem vel nisl mollis dignissim vel eget urna. nam semper nisi ut maximus iaculis.</p>        </div>    </div>    <div class="teamperson">      <p>        <a href="#janet">          <img src="http://placehold.it/100x100" alt="" />      </p>      <h3>janet</h3>      <p>chief engagement officer</a>      </p>      <div id="janet" class="staffhidden">        <p>lorem ipsum janet lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam et mauris sagittis felis fringilla lacinia ut ac ipsum. in ac mollis sem. pellentesque fringilla felis vel rutrum dapibus. duis cursus sed magna et malesuada. etiam          auctor vestibulum diam, pretium molestie tortor ultrices nec. aliquam finibus maximus nulla, vitae tincidunt lorem molestie a. ut non dolor quis dui euismod bibendum. quisque eu diam sem. curabitur sed eros facilisis, facilisis elit sed, finibus          massa. nulla tincidunt vulputate ipsum non feugiat. donec elementum dui orci hendrerit tempus. cras egestas euismod risus in placerat. maecenas dictum, quam vitae varius malesuada, metus risus eleifend est, sit amet interdum est leo vitae urna.          suspendisse et nisi metus. in vestibulum mollis magna consequat. vivamus fringilla interdum tellus sit amet auctor. in hac habitasse platea dictumst. vivamus luctus massa. integer eget dui lacinia orci venenatis iaculis. curabitur facilisis          mi id interdum efficitur. etiam nulla ac augue molestie gravida. nullam non ligula sit amet tortor faucibus ultrices. curabitur consectetur commodo nulla, vel cursus augue consequat suscipit. aenean blandit libero in odio auctor lobortis. praesent          luctus felis erat mollis, sed volutpat urna faucibus. nam sed sem vel nisl mollis dignissim vel eget urna. nam semper nisi ut maximus iaculis.</p>      </div>    </div>  </div>

thank in advance, , apologize blatant errors due amateur skills.