我有一个导航，它位于我的内容内，并且位于每个标题上方。然后，我使用锚链接在页面上向上和向下导航。我选择这样做的原因（而不是 one 静态导航）在这一点上不如我要弄清楚的事实重要：
加载页面时，导航栏的位置很好。但是，当我单击链接时，它就会向上移动（导航顶部的填充/边距比单击任何链接之前要多。这基本上就是问题。。） 这就是我要防止的事情。出于某种原因，当单击导航中的第一个和最后一个链接时，其下方的部分文本的偏移量也与单击第二个和第三个链接时的偏移略有不同，并且仅一个像素左右。这非常烦人/：
我尝试过的方法：在某些部分添加/删除边距，通常尝试考虑下一步该怎么做。谷歌搜索。
在我们进一步之前？这是一个普遍的，永恒的问题，还是有可能实现？
HTML：
<div class="Content" id="content"><div id="topTop"></div>
<div id="career">
<section id="section1" data-anchor="section1" class="anchor section">
<div class="index">
<a href="#section1" class="indexItem"><div>Section1</div></a>
<a href="#section2" class="indexItem"><div>Section2</div></a>
<a href="#section3" class="indexItem"><div>Section3</div></a>
<a href="#section4" class="indexItem"><div>Section4</div></a>
</div>
<h2>Section 1</h2>
<p>
<strong class="fine">This section is positioned fine</strong>, <strong class="notfine">but only the first time,</strong> <strong class="reallynotfine">not when you've gotten here by clicking another anchor link!</strong> Etiam enim sapien, sodales ut ante vitae, porta sagittis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum faucibus varius molestie. Vestibulum dolor est, hendrerit nec ipsum sit amet, mollis elementum enim. Mauris et leo dui. Duis aliquam, purus vitae finibus ornare, eros mauris varius neque, at facilisis augue risus eget diam. Cras vitae urna faucibus, dictum eros a, consectetur arcu. Integer interdum fermentum nisl et congue. Proin dignissim interdum egestas.
</p>
<p>
Sed auctor venenatis diam a vulputate. Nunc condimentum orci ex. Pellentesque dapibus ipsum erat, eget pharetra arcu tristique quis. Donec orci justo, ultricies vel purus a, placerat pretium dui. Suspendisse sed nulla vitae ipsum iaculis elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam eu ullamcorper arcu. Proin dictum imperdiet ex at cursus.
</p>
<p>
Praesent sit amet eros nisi. Praesent semper vel dolor vitae tempor. Morbi sed dolor in ipsum hendrerit scelerisque eget vitae leo. Nunc sollicitudin in augue non imperdiet. Donec ultricies mollis velit ac tempor. Donec quis commodo tortor, eget tempor quam. Sed non aliquam dui.
</p>
<p>
Suspendisse mauris turpis, sagittis nec justo nec, mattis pulvinar est. Nam placerat semper lectus, sed dignissim est. Curabitur aliquam facilisis porta. Sed rutrum vestibulum ornare. Sed dapibus urna velit, eget cursus ante suscipit eget. Vivamus eget risus vehicula, molestie sapien non, commodo mi. Quisque purus augue, cursus eget tortor eu, eleifend consequat sem. Donec porta mollis augue vel malesuada. Suspendisse feugiat porta faucibus. Curabitur aliquet urna quis magna dignissim fermentum. Sed sit amet augue magna.
</p>
<p>
<p>
Donec faucibus in erat ut pellentesque. Quisque facilisis libero lectus, quis dignissim velit semper vitae. Vivamus pulvinar at magna id pretium. Aliquam in urna ligula. Etiam sollicitudin massa risus, eget malesuada risus ullamcorper sed. Suspendisse accumsan enim vel tincidunt facilisis. Nunc sed venenatis lorem. Cras cursus, lorem a accumsan bibendum, turpis nulla faucibus odio, lacinia iaculis erat risus
</p>
</section>
<section id="section2" data-anchor="section2" class="anchor section">
<div class="index">
<a href="#section1" class="indexItem"><div>Section1</div></a>
<a href="#section2" class="indexItem"><div>Section2</div></a>
<a href="#section3" class="indexItem"><div>Section3</div></a>
<a href="#section4" class="indexItem"><div>Section4</div></a>
</div>
<h2 class="paginatorAnchor">Section 2</h2>
<p>
<strong class="notfine">This section is positioned too high. In comparison to the others, after this point though, they are <i>all</i> perfect</strong> Suspendisse et pretium velit. Maecenas hendrerit lorem mauris, vel interdum nunc elementum ac. Duis rhoncus lobortis imperdiet. Ut at euismod purus. Maecenas quis purus a mi imperdiet ultricies. Aenean quis mattis arcu. Nullam quis mi metus. Sed et congue arcu, quis bibendum sem. Morbi ultrices nisi ac euismod pharetra. Sed ac eros non nisi dapibus volutpat. Integer est sapien, volutpat in dapibus quis, scelerisque at nisl. Mauris vel nulla sapien. Vestibulum eu eleifend sem. Integer ex metus, pellentesque a nisi a, gravida convallis est.
</p>
<p>
Suspendisse potenti. Duis blandit, ipsum quis condimentum interdum, neque nisi faucibus diam, sed tempus nibh arcu eu neque. Nulla facilisis id metus et dictum. Morbi sed finibus massa, ac molestie magna. In purus lorem, euismod vitae tempus ac, commodo nec massa. Vestibulum in pharetra lorem, quis egestas erat. Praesent aliquet nec nisl eget maximus. Sed blandit egestas nisl vel lacinia. Ut lorem erat, tempor a sapien sit amet, rhoncus congue elit. Aliquam ornare tortor in dui auctor, eget tempor magna tincidunt. Donec et nisl eros.
</p>
</section>
<section id="section3" data-anchor="section3" class="anchor section">
<div class="index">
<a href="#section1" class="indexItem"><div>Section1</div></a>
<a href="#section2" class="indexItem"><div>Section2</div></a>
<a href="#section3" class="indexItem"><div>Section3</div></a>
<a href="#section4" class="indexItem"><div>Section4</div></a>
</div>
<h2 class="paginatorAnchor">Section 3</h2>
<p>
<strong class="notfine">This section is positioned too high. In comparison to the others, after this point though, they are <i>all</i> perfect</strong> Integer dictum ac risus vitae semper. Nam a congue erat. Donec facilisis erat at ex volutpat imperdiet. Maecenas metus elit, cursus ultrices nisi sed, tincidunt volutpat nulla. Nam vestibulum massa at turpis blandit posuere. Quisque lacinia mi commodo mauris sagittis dapibus ac eu libero. Integer id tristique magna.
</p>
<p>
Morbi rutrum odio orci, at lobortis mi rhoncus a. Nam varius tempor urna in tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tincidunt eros a sapien pellentesque, in commodo ligula varius. Nullam lobortis erat nisl, eu luctus nisl fermentum sed. Sed eu lacus sed turpis imperdiet maximus quis et arcu. Aenean tincidunt purus sit amet sem fringilla, in fringilla mi malesuada. Aliquam vulputate tortor eu enim eleifend suscipit id eget magna. Donec at quam a eros dapibus rutrum. In ut nisi suscipit, maximus neque accumsan, malesuada libero.
</p>
</section>
<section id="section4" data-anchor="section4" class="anchor section">
<div class="index">
<a href="#section1" class="indexItem"><div>Section1</div></a>
<a href="#section2" class="indexItem"><div>Section2</div></a>
<a href="#section3" class="indexItem"><div>Section3</div></a>
<a href="#section4" class="indexItem"><div>Section4</div></a>
</div>
<h2 class="paginatorAnchor">Section 4</h2>
<p>
<strong class="notfine">This section is positioned too high. In comparison to the others, after this point though, they are <i>all</i> perfect</strong> Suspendisse ut aliquam eros. Praesent consequat dapibus auctor. Donec consequat libero in dui condimentum molestie. Integer dignissim erat diam, at facilisis nulla aliquam ut. Nam ullamcorper eu lorem vel egestas. Morbi dictum at quam eget ultricies. Donec finibus pharetra elit, sed scelerisque nibh suscipit id.
</p>
<p>
Etiam pulvinar ipsum vitae laoreet aliquet. Praesent quis lacinia dolor. Integer neque libero, facilisis vitae porttitor et, rhoncus a nisl. Quisque aliquet ultrices accumsan. Nam augue massa, ultrices rutrum sodales mollis, condimentum id purus. Mauris non semper ipsum. Praesent a dolor at est tincidunt lobortis sed in lorem. Nunc condimentum efficitur odio, at condimentum dui dictum vel. In in lacus non felis hendrerit laoreet. Donec dapibus cursus venenatis. Aliquam fringilla purus sed neque tristique, ac auctor neque finibus. Mauris diam nunc, lacinia sed nisl sit amet, luctus condimentum libero.
</p>
</section>
</div></div>
CSS：
.Content {
position: fixed;
box-sizing: border-box;
padding: 5px;
left: 50%;
transform: translateX(-50%);
min-width: calc(100% - 30px);
min-width: 455px;
max-width: 455px;
min-height: calc(100% - 30px);
max-height: calc(100% - 30px);
height: calc(100% - 172px);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 0;
overflow: auto;
color: hsla(210, 11%, 60%, 1);
font-family: 'Helvetica', sans-serif;
font-size: .8rem;
text-transform: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
padding: 15px;
-webkit-box-shadow: inset 0 -1px 2px rgba(0,0,0,.24), inset 0 -2px 3px rgba(0, 0, 0, .48);
-moz-box-shadow: inset 0 -1px 2px rgba(0,0,0,.24), inset 0 -2px 3px rgba(0, 0, 0, .48);
box-shadow: inset 0 -1px 2px rgba(0,0,0,.24), inset 0 -2px 3px rgba(0, 0, 0, .48);
background: #15181a;
background: -moz-linear-gradient(top, #191c1f 1%, #15181a 94px, #15181a 100%);
background: -webkit-linear-gradient(top, #191c1f 1%,#15181a 94px,#15181a 100%);
background: linear-gradient(to bottom, #191c1f 1%,#15181a 94px,#15181a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191c1f', endColorstr='#15181a',GradientType=0 );
left: 15px;
transform: translateX(0%);
}
.index {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
background: transparent;
margin-block-end: 2em;
}
.indexItem {
text-decoration: none;
}
.index div {
display: flex;
border: 1px dashed rgba(255,255,255,.24);
padding: 5px 10px 5px 10px;
border-radius: 25px;
margin: 2px 2px 2px 2px;
font-size: .7rem;
}
/* end of the styling related to the issue */
/* end of the styling related to the issue */
/* end of the styling related to the issue */
/* start of unnesssassary color styling */
/* start of unnesssassary color styling */
/* start of unnesssassary color styling */
/* start of unnesssassary color styling */
body {
background:#191c1f;
}
* {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
::selection {
background: yellow;
color: #191c1f;
}
a:link, a:visited, a:hover, a:active {
color:white;
}
strong.fine {
color:white;
border-bottom: dashed green 1px;
}
strong.notfine {
color:white;
border-bottom: dashed yellow 1px;
}
strong.reallynotfine {
color:white;
border-bottom: dashed red 1px;
}
/*region Font settings for Tags and Elements */
b, strong {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.3rem;
}
h3 {
font-size: 1.05rem;
line-height: 0.15em;
text-transform: uppercase;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
}
h4 {
font-size: .7rem;
line-height: .7em;
text-transform: uppercase;
font-family: 'IBM Plex Serif', serif;
font-weight: 400;
}
.contentTitle {
font-family: 'IBM Plex Serif', serif;
font-weight: 400;
margin-top: 0;
}
.titles {
color: white;
margin: 30px;
user-select: none;
margin-top: 55px;
margin: 55px 30px 14px 30px;
}
/*region Scrollbar*/
::-webkit-scrollbar {
border-radius: 5px;
background: transparent url('transparent.png') repeat-y !important; /* IMAGE is IMPORTANT as COLOR does NOT work. Also it needs to be HERE */
border: 0 solid red;
width: 14px;
height: 14px !important;
}
::-webkit-scrollbar-button {
display: none; /* DON'T display the top/bottom/left/right arrows */
}
::-webkit-scrollbar-thumb {
height: 6px;
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 7px;
background-color: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.05), inset 1px 1px 0 rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb:hover /* ..and when hovering it */
{
border-radius: 5px;
background-color: rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb:active /* ..and when clicking it */
{
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-thumb:active /* ..and when it's focused */
{
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-corner {
display:none; /* DON'T display the corner */
}
::-webkit-resizer, ::-webkit-resizer:hover, ::-webkit-resizer:focus, ::-webkit-resizer:active {
background: transparent url('../res/transparent.png') repeat-y !important; /* IMAGE is IMPORTANT as COLOR does NOT work. Also it needs to be HERE */
}
/*endregion*/
答案 0 :(得分：2)
您需要删除.Content的顶部填充，并在各部分中添加顶部填充：
.Content {
position: fixed;
box-sizing: border-box;
padding: 5px;
left: 50%;
transform: translateX(-50%);
min-width: calc(100% - 30px);
min-width: 455px;
max-width: 455px;
min-height: calc(100% - 30px);
max-height: calc(100% - 30px);
height: calc(100% - 172px);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 0;
overflow: auto;
color: hsla(210, 11%, 60%, 1);
font-family: 'Helvetica', sans-serif;
font-size: .8rem;
text-transform: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
padding: 0 15px 15px 15px;
-webkit-box-shadow: inset 0 -1px 2px rgba(0,0,0,.24), inset 0 -2px 3px rgba(0, 0, 0, .48);
-moz-box-shadow: inset 0 -1px 2px rgba(0,0,0,.24), inset 0 -2px 3px rgba(0, 0, 0, .48);
box-shadow: inset 0 -1px 2px rgba(0,0,0,.24), inset 0 -2px 3px rgba(0, 0, 0, .48);
background: #15181a;
background: -moz-linear-gradient(top, #191c1f 1%, #15181a 94px, #15181a 100%);
background: -webkit-linear-gradient(top, #191c1f 1%,#15181a 94px,#15181a 100%);
background: linear-gradient(to bottom, #191c1f 1%,#15181a 94px,#15181a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191c1f', endColorstr='#15181a',GradientType=0 );
left: 15px;
transform: translateX(0%);
}
.index {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
background: transparent;
margin-block-end: 2em;
}
.indexItem {
text-decoration: none;
}
.index div {
display: flex;
border: 1px dashed rgba(255,255,255,.24);
padding: 5px 10px 5px 10px;
border-radius: 25px;
margin: 2px 2px 2px 2px;
font-size: .7rem;
}
/* end of the styling related to the issue */
/* end of the styling related to the issue */
/* end of the styling related to the issue */
/* start of unnesssassary color styling */
/* start of unnesssassary color styling */
/* start of unnesssassary color styling */
/* start of unnesssassary color styling */
body {
background:#191c1f;
}
* {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
::selection {
background: yellow;
color: #191c1f;
}
a:link, a:visited, a:hover, a:active {
color:white;
}
strong.fine {
color:white;
border-bottom: dashed green 1px;
}
strong.notfine {
color:white;
border-bottom: dashed yellow 1px;
}
strong.reallynotfine {
color:white;
border-bottom: dashed red 1px;
}
/*region Font settings for Tags and Elements */
b, strong {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.3rem;
}
h3 {
font-size: 1.05rem;
line-height: 0.15em;
text-transform: uppercase;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
}
h4 {
font-size: .7rem;
line-height: .7em;
text-transform: uppercase;
font-family: 'IBM Plex Serif', serif;
font-weight: 400;
}
.contentTitle {
font-family: 'IBM Plex Serif', serif;
font-weight: 400;
margin-top: 0;
}
.titles {
color: white;
margin: 30px;
user-select: none;
margin-top: 55px;
margin: 55px 30px 14px 30px;
}
/*region Scrollbar*/
::-webkit-scrollbar {
border-radius: 5px;
background: transparent url('transparent.png') repeat-y !important; /* IMAGE is IMPORTANT as COLOR does NOT work. Also it needs to be HERE */
border: 0 solid red;
width: 14px;
height: 14px !important;
}
::-webkit-scrollbar-button {
display: none; /* DON'T display the top/bottom/left/right arrows */
}
::-webkit-scrollbar-thumb {
height: 6px;
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 7px;
background-color: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.05), inset 1px 1px 0 rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb:hover /* ..and when hovering it */
{
border-radius: 5px;
background-color: rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb:active /* ..and when clicking it */
{
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-thumb:active /* ..and when it's focused */
{
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-corner {
display:none; /* DON'T display the corner */
}
::-webkit-resizer, ::-webkit-resizer:hover, ::-webkit-resizer:focus, ::-webkit-resizer:active {
background: transparent url('../res/transparent.png') repeat-y !important; /* IMAGE is IMPORTANT as COLOR does NOT work. Also it needs to be HERE */
}
/*endregion*/
.section { padding-top: 15px;}<div class="Content" id="content"><div id="topTop"></div>
<div id="career">
<section id="section1" data-anchor="section1" class="anchor section">
<div class="index">
<a href="#section1" class="indexItem"><div>Section1</div></a>
<a href="#section2" class="indexItem"><div>Section2</div></a>
<a href="#section3" class="indexItem"><div>Section3</div></a>
<a href="#section4" class="indexItem"><div>Section4</div></a>
</div>
<h2>Section 1</h2>
<p>
<strong class="fine">This section is positioned fine</strong>, <strong class="notfine">but only the first time,</strong> <strong class="reallynotfine">not when you've gotten here by clicking another anchor link!</strong> Etiam enim sapien, sodales ut ante vitae, porta sagittis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum faucibus varius molestie. Vestibulum dolor est, hendrerit nec ipsum sit amet, mollis elementum enim. Mauris et leo dui. Duis aliquam, purus vitae finibus ornare, eros mauris varius neque, at facilisis augue risus eget diam. Cras vitae urna faucibus, dictum eros a, consectetur arcu. Integer interdum fermentum nisl et congue. Proin dignissim interdum egestas.
</p>
<p>
Sed auctor venenatis diam a vulputate. Nunc condimentum orci ex. Pellentesque dapibus ipsum erat, eget pharetra arcu tristique quis. Donec orci justo, ultricies vel purus a, placerat pretium dui. Suspendisse sed nulla vitae ipsum iaculis elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam eu ullamcorper arcu. Proin dictum imperdiet ex at cursus.
</p>
<p>
Praesent sit amet eros nisi. Praesent semper vel dolor vitae tempor. Morbi sed dolor in ipsum hendrerit scelerisque eget vitae leo. Nunc sollicitudin in augue non imperdiet. Donec ultricies mollis velit ac tempor. Donec quis commodo tortor, eget tempor quam. Sed non aliquam dui.
</p>
<p>
Suspendisse mauris turpis, sagittis nec justo nec, mattis pulvinar est. Nam placerat semper lectus, sed dignissim est. Curabitur aliquam facilisis porta. Sed rutrum vestibulum ornare. Sed dapibus urna velit, eget cursus ante suscipit eget. Vivamus eget risus vehicula, molestie sapien non, commodo mi. Quisque purus augue, cursus eget tortor eu, eleifend consequat sem. Donec porta mollis augue vel malesuada. Suspendisse feugiat porta faucibus. Curabitur aliquet urna quis magna dignissim fermentum. Sed sit amet augue magna.
</p>
<p>
<p>
Donec faucibus in erat ut pellentesque. Quisque facilisis libero lectus, quis dignissim velit semper vitae. Vivamus pulvinar at magna id pretium. Aliquam in urna ligula. Etiam sollicitudin massa risus, eget malesuada risus ullamcorper sed. Suspendisse accumsan enim vel tincidunt facilisis. Nunc sed venenatis lorem. Cras cursus, lorem a accumsan bibendum, turpis nulla faucibus odio, lacinia iaculis erat risus
</p>
</section>
<section id="section2" data-anchor="section2" class="anchor section">
<div class="index">
<a href="#section1" class="indexItem"><div>Section1</div></a>
<a href="#section2" class="indexItem"><div>Section2</div></a>
<a href="#section3" class="indexItem"><div>Section3</div></a>
<a href="#section4" class="indexItem"><div>Section4</div></a>
</div>
<h2 class="paginatorAnchor">Section 2</h2>
<p>
<strong class="notfine">This section is positioned too high. In comparison to the others, after this point though, they are <i>all</i> perfect</strong> Suspendisse et pretium velit. Maecenas hendrerit lorem mauris, vel interdum nunc elementum ac. Duis rhoncus lobortis imperdiet. Ut at euismod purus. Maecenas quis purus a mi imperdiet ultricies. Aenean quis mattis arcu. Nullam quis mi metus. Sed et congue arcu, quis bibendum sem. Morbi ultrices nisi ac euismod pharetra. Sed ac eros non nisi dapibus volutpat. Integer est sapien, volutpat in dapibus quis, scelerisque at nisl. Mauris vel nulla sapien. Vestibulum eu eleifend sem. Integer ex metus, pellentesque a nisi a, gravida convallis est.
</p>
<p>
Suspendisse potenti. Duis blandit, ipsum quis condimentum interdum, neque nisi faucibus diam, sed tempus nibh arcu eu neque. Nulla facilisis id metus et dictum. Morbi sed finibus massa, ac molestie magna. In purus lorem, euismod vitae tempus ac, commodo nec massa. Vestibulum in pharetra lorem, quis egestas erat. Praesent aliquet nec nisl eget maximus. Sed blandit egestas nisl vel lacinia. Ut lorem erat, tempor a sapien sit amet, rhoncus congue elit. Aliquam ornare tortor in dui auctor, eget tempor magna tincidunt. Donec et nisl eros.
</p>
</section>
<section id="section3" data-anchor="section3" class="anchor section">
<div class="index">
<a href="#section1" class="indexItem"><div>Section1</div></a>
<a href="#section2" class="indexItem"><div>Section2</div></a>
<a href="#section3" class="indexItem"><div>Section3</div></a>
<a href="#section4" class="indexItem"><div>Section4</div></a>
</div>
<h2 class="paginatorAnchor">Section 3</h2>
<p>
<strong class="notfine">This section is positioned too high. In comparison to the others, after this point though, they are <i>all</i> perfect</strong> Integer dictum ac risus vitae semper. Nam a congue erat. Donec facilisis erat at ex volutpat imperdiet. Maecenas metus elit, cursus ultrices nisi sed, tincidunt volutpat nulla. Nam vestibulum massa at turpis blandit posuere. Quisque lacinia mi commodo mauris sagittis dapibus ac eu libero. Integer id tristique magna.
</p>
<p>
Morbi rutrum odio orci, at lobortis mi rhoncus a. Nam varius tempor urna in tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tincidunt eros a sapien pellentesque, in commodo ligula varius. Nullam lobortis erat nisl, eu luctus nisl fermentum sed. Sed eu lacus sed turpis imperdiet maximus quis et arcu. Aenean tincidunt purus sit amet sem fringilla, in fringilla mi malesuada. Aliquam vulputate tortor eu enim eleifend suscipit id eget magna. Donec at quam a eros dapibus rutrum. In ut nisi suscipit, maximus neque accumsan, malesuada libero.
</p>
</section>
<section id="section4" data-anchor="section4" class="anchor section">
<div class="index">
<a href="#section1" class="indexItem"><div>Section1</div></a>
<a href="#section2" class="indexItem"><div>Section2</div></a>
<a href="#section3" class="indexItem"><div>Section3</div></a>
<a href="#section4" class="indexItem"><div>Section4</div></a>
</div>
<h2 class="paginatorAnchor">Section 4</h2>
<p>
<strong class="notfine">This section is positioned too high. In comparison to the others, after this point though, they are <i>all</i> perfect</strong> Suspendisse ut aliquam eros. Praesent consequat dapibus auctor. Donec consequat libero in dui condimentum molestie. Integer dignissim erat diam, at facilisis nulla aliquam ut. Nam ullamcorper eu lorem vel egestas. Morbi dictum at quam eget ultricies. Donec finibus pharetra elit, sed scelerisque nibh suscipit id.
</p>
<p>
Etiam pulvinar ipsum vitae laoreet aliquet. Praesent quis lacinia dolor. Integer neque libero, facilisis vitae porttitor et, rhoncus a nisl. Quisque aliquet ultrices accumsan. Nam augue massa, ultrices rutrum sodales mollis, condimentum id purus. Mauris non semper ipsum. Praesent a dolor at est tincidunt lobortis sed in lorem. Nunc condimentum efficitur odio, at condimentum dui dictum vel. In in lacus non felis hendrerit laoreet. Donec dapibus cursus venenatis. Aliquam fringilla purus sed neque tristique, ac auctor neque finibus. Mauris diam nunc, lacinia sed nisl sit amet, luctus condimentum libero.
</p>
</section>
</div></div>