我正在创建一个人员布局页面，其中隐藏的div显示为锚标记，并且：当点击工作人员的图片或名称时为目标。但是，默认的锚跳跃行为太多了......跳跃（编辑：staccato和jarring让用户的眼睛容易跟随），这样才能干净利落地工作。
我已经仔细阅读了这个主题的previous questions，但似乎无法实现有效的解决方案。
这是我尝试实施的代码段：
$(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: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 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 a 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 a consequat. Vivamus fringilla interdum tellus sit amet auctor. In hac habitasse platea dictumst. Vivamus a luctus massa. Integer eget dui lacinia orci venenatis iaculis. Curabitur facilisis
mi id interdum efficitur. Etiam a 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 a 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 and 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 a 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 a consequat. Vivamus fringilla interdum tellus sit amet auctor. In hac habitasse platea dictumst. Vivamus a luctus massa. Integer eget dui lacinia orci venenatis iaculis. Curabitur
facilisis mi id interdum efficitur. Etiam a 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 a 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 a 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 a consequat. Vivamus fringilla interdum tellus sit amet auctor. In hac habitasse platea dictumst. Vivamus a luctus massa. Integer eget dui lacinia orci venenatis iaculis. Curabitur facilisis
mi id interdum efficitur. Etiam a 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 a 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>
提前谢谢你，我为业余技能造成的任何明显错误道歉。