html - 锚链接破坏定位
问题描述
我有一个导航位于我的内容中，并且位于每个标题上方。然后我使用锚链接在页面上上下导航。我选择这样做的原因（而不是一个静态导航）在这一点上不如我想弄清楚这一点重要：
当我加载我的页面时，导航栏的位置很好。但是，当我单击一个链接时，它会向上移动（导航顶部的填充/边距在单击任何链接之前比在单击任何链接之后更多。这基本上就是问题所在。）。这是我要防止的。出于某种原因，当单击导航中的第一个和最后一个链接时，下面的部分文本的偏移量也与单击第二个和第三个链接时略有不同，并且只有一个像素左右。这非常烦人/：
我尝试过的：在某些部分添加/删除边距，并且通常会尝试考虑下一步我可以做什么。谷歌搜索。
在我们走得更远之前？这是一个普遍的、永恒的问题，还是有可能实现？
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*/
解决方案
您需要删除 .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>推荐阅读
- sql - 如何根据sql中的当前时间在两个时间之间获取数据
- python - 3D 数据点上的 Python 多项式回归
- php - Laravel 更新、安装和删除以重新安装为目的的错误
- bash - 从 Jenkins 文件访问自定义环境变量
- html - 无法使用 JQuery 更改 Html 元素之间的文本
- c# - 是否必须等待对单个文件的异步写入？
- python - 我需要澄清python中的以下代码以及什么：^38
- amazon-web-services - 云形成自定义资源创建失败
- azure-devops - 来自相对路径的自述文件中的 Azure Devops 映像
- c# - 如何通过从另一个标签获取颜色来更改标签的颜色？