如何应用锚链接，所以在滚动时，顶部会留下一些空间？

Question

我有这个示例页面上有三个锚链接。链接工作正常，单击锚链接后，我设法控制滚动发生的程度。

问题是，在第一次单击时，锚链接工作正常，但在第二次单击行时，效果将不再适用。有帮助吗？

这是我的代码：

// SCROLL //

function offsetAnchor() {
  
    if(location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY -200);
    }
}

// window.addEventListener("hashchange", offsetAnchor);

window.setTimeout(offsetAnchor, 0); 


// FIRST BUTTON

var firstcontent = document.getElementById("first-content");
var buttonfirst = document.getElementById("firstbtn");

buttonfirst.onclick = function(){

if(firstcontent.className == "openfirst"){
  //show the blue box
  firstcontent.className = "";
  buttonfirst.innerHTML = "Open";
} else {
  // hide the box
  firstcontent.className = "openfirst";
  buttonfirst.innerHTML = "Hide";
}
}

// SECOND BUTTON

var secondcontent = document.getElementById("second-content");
var buttonsecond = document.getElementById("secondbtn");

buttonsecond.onclick = function(){

if(secondcontent.className == "opensecond"){
  //show the blue box
  secondcontent.className = "";
  buttonsecond.innerHTML = "Open";
} else {
  // hide the box
  secondcontent.className = "opensecond";
  buttonsecond.innerHTML = "Hide";
}
}

// THIRD BUTTON

var thirdcontent = document.getElementById("third-content");
var buttonthird = document.getElementById("thirdbtn");

buttonthird.onclick = function(){

if(thirdcontent.className == "openthird"){
  //show the blue box
  thirdcontent.className = "";
  buttonthird.innerHTML = "Open";
} else {
  // hide the box
  thirdcontent.className = "openthird";
  buttonthird.innerHTML = "Hide";
}
}

#html:scroll {
  margin-top: 100px;
  position: fixed;
}

/* html {
  scroll-behavior: smooth;
} */

/* FONTS */

#first-content h2, #second-content h2, #third-content h2 {
  padding-top: 0px;
  padding: 20px;
  margin: 0px;
}

#first-content h3, #second-content h3, #third-content h3 {
  margin: 10px;
}

#first-content p, #second-content p, #third-content p {
  margin: 0 auto;
  padding-bottom: 10px;
  text-transform: none;
}

/* LOGO CONTAINER */

.logo-container {
  margin: 0 auto;
  font-family: arial;
  font-size: 0.8em;
  display: flex;
  height: 60px;
  margin-bottom: 30px;
  align-items: center;
}

.logo-container h2 {
  font-weight: 900;
}

/* MAIN CONTENT */

.main-content {
  width: 100%;
  height: 240px;
  background-color: #ff8800;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.main-content h1 {
  margin-bottom: 50px;
  font-family: arial;
  font-weight: 900;
  color: #fff;
  font-size: 1.5em;
}


/* FIRST CONTAINER */

.main-container {
  margin: 0 auto;
  background-color: #c1e8ff;
  padding: 0px 0px 50px 0px;
  max-width: 400px;
  height: 100%;
  min-height: 550px;
  display: flex;
  flex-direction: column;
}

/* BUTTONS */

.buttons {
  margin: 0 auto;
}

#firstbtn, #secondbtn, #thirdbtn {
  padding: 20px;
  display: flex;
  justify-content: center;
  min-width: 150px;
  font-family: arial;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 15px;
}

#firstbtn, #secondbtn, #thirdbtn {
 background-color: #fff;
}

/* BOXES */

.boxes {
  display: flex;
  justify-content: center;
}

/* BOX CONTENT FIRST */

#first-content, #second-content, #third-content {
  background-color: lightblue;
  width: 100%;
  height: 300px;
  margin-top: 0px;
  /* visibility: hidden; */
  display: none;
}

#first-content.openfirst, #second-content.opensecond, #third-content.openthird {
  background-color: lightblue;
  width: 100%;
  height: auto;
  min-height: 100px;
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 20px;
  /* visibility: visible; */
  display: flex;
  flex-direction: column;
  /* justify-content: space-around; */
  /* align-items: center; */
  text-align: center;
  font-family: arial;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  -webkit-animation-name: fadein;
  -webkit-animation-duration: 1s;
  animation-name: fadein;
  animation-duration: 1s;
}

@-webkit-keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* FONTS */

<body>
  
<head>
    <script src="myjs.js"></script>
    <link rel="stylesheet" href="website.css">
</head>
  
<!-- FIRST CONTAINER -->  
<div class="main-container">
  
  <div class="logo-container">
    <h2>TEXT</h2>
  </div>
  
  <div class="main-content">
    <h1>Some text</h1>
  </div>
  
<div class="buttons">
<a href="#first-content" id="firstbtn">Open</a>
</div>
<div class="boxes">
<div id="first-content">
  <h2>SAMPLE 1</h2>
  <h3>PUT SOME SAMPLE HERE</h3>
  <p>Put some text here</p>
  <h3>PUT SOME SAMPLE HERE</h3>
  <p>Put some text here</p>
  <h2>SAMPLE 2</h2>
  <h3>PUT SOME SAMPLE HERE</h3>
  <p>Put some text here</p>
  <h3>PUT SOME SAMPLE HERE</h3>
  <p>Put some text here</p>
  </div>
</div>

<!-- SECOND CONTAINER -->
<div class="buttons">
<a href="#second-content" id="secondbtn">Open</a>
</div>
<div class="boxes">
<div id="second-content">
  <h2>SAMPLE 1</h2>
  <h3>PUT SOME SAMPLE HERE</h3>
  <p>Put some text here</p>
  </div>
</div>
  
<!-- THIRD CONTAINER -->
<div class="buttons">
<a href="#third-content" id="thirdbtn">Open</a>
</div>
<div class="boxes">
<div id="third-content">
  <h2>SAMPLE 1</h2>
  <h3>PUT SOME SAMPLE HERE</h3>
  <p>Put some text here</p>
  </div>
</div>
  
</div>
  
  
  
</body>

Answer 1

那是因为你的页面太小了。它在其他两个例子上也可以正常工作，但显示的内容不存在。

要理解我的意思，请尝试将main-content类从100％高度设置为2000px。现在有更多内容要显示，按钮点击将起作用。