在个人网站上工作，发现无论何时单击任何 HTML 锚点，它都会完全破坏网站或根本不会链接到网页上的适当位置。通常发生在 Firefox 上，但网站在 Edge 和 Chrome 上运行良好。
网站的实时版本在这里：http://smithchrisgraphics.com/
使用 Firefox 时问题最为明显；当我使用 Edge 测试我的网站时，我没有遇到任何问题。我尝试减少 HTML 和 CSS 以查看是否可以查明问题所在，但我仍然不知道是什么导致了该错误。任何帮助查明问题的帮助都会有所帮助。我删除了所有外部 js 文件。
@charset "UTF-8";
/* CSS Document */
html
{
overflow-x:hidden;
scroll-behavior: smooth;
}
body
{
min-height: 500vh;
max-width: 100vw;
width: 100%;
font-family: 'Roboto Slab', serif;
overflow: hidden;
position: absolute;
left: -13px;
z-index: -3;
/*outline: 1px solid red;*/
}
.displaySection
{
position: relative;
top: 100vh;
left: 0;
width: 100%;
background-color: red;
padding: 20px 0 20px;
margin: 5px 0 5px 5px;
min-height: 100vh;
overflow-y: visible;
overflow-x: hidden;
}
a
{
text-decoration: none;
}
ul
{
list-style: none;
}
hr
{
margin: 50px 10px 10px 10px;
}
#wrapper
{
width:100vw;
}
#NameDrop
{
position: relative;
top: 50vh;
transform: translateY(-60%);
list-style:none;
margin:0;
padding:0;
text-align:center;
z-index: 5;
}
#NameDrop ul
{
text-decoration-line: none;
list-style-type: none;
margin: 0 auto;
left: 40%;
}
#NameDrop ul li
{
text-decoration-line: none;
display: inline;
text-align: center;
width: 25%;
margin: 0 auto;
}
#NameDrop li a
{
display:inline-block;
position: relative;
padding:10px 20px;
left: -20px;
color: black;
text-decoration-line: none;
font-size: 14pt;
border-radius: 30px;
opacity: 1;
/* Safari 4.0 - 8.0 */
-webkit-animation-name: SlowFade;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.7s;
-webkit-animation-iteration-count: 1;
/* Standard syntax */
animation-name: SlowFade;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0.7s;
animation-iteration-count: 1;
animation-direction: forwards;
animation-fill-mode: forwards;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
-mozilla-transition: 0.3s;
transition: 0.3s;
}
#NameDrop li a:hover
{
background-color:rgba(151,0,2,1.00);
color: white;
text-decoration-line: none;
}<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<!-- External CSS Files -->
<link href="css/home.css" rel="stylesheet" type="text/css">
<!-- Need script for anchors due to HTML5 Bug on browsers -->
<script>
function snapToAnchor(anchor)
{
document.getElementById(anchor).scrollIntoView(true);
}
</script>
</head>
<body>
<div id="NameDrop">
<ul>
<li><a href="#link01">About</a></li>
<li><a onclick="snapToAnchor('link02')">Design</a></li>
<li><a onclick="snapToAnchor('link03')">Experience</a></li>
<li><a href="#link04">Education</a></li>
<li><a onclick="snapToAnchor('link05')">Contact</a></li>
</ul>
</div>
<!-- Each section should take up a minimum of at least 1 full screen -->
<div id="link01" class="displaySection">
</div>
<div id="link02" class="displaySection">
</div>
<div id="link03" class="displaySection">
</div>
<div id="link04" class="displaySection">
</div>
<div id="link05" class="displaySection">
</div>
</body>
</html>如果我可以提供任何额外的详细信息来提供帮助，或者您知道可能导致此问题的原因，请告诉我！
这是由 body 标签上的
overflow: hidden这可能与这个问题有关为什么使用锚链接时此页面布局会中断
似乎向上移动，因为它包含 .panel within 设置为 overflow:hidden & 包含被剪裁的内容 结果。half content