html - 使用平滑滚动时，为什么它不滚动到我指定的要滚动到的区域？

Question

我正在制作一个网站，我选择使用平滑滚动。

平滑滚动效果有效，但如果（例如）我选择向下滚动到“时间线”部分，然后滚动回“主页”，它只会在主页部分中途停止滚动。为什么是这样？下面你可以看到我的网站。

例如，我将此 div 设置为 section1 (home)：

<div id='section1' class="home-info">

因此，我认为 Smoothscroll 会将我带到该 div 的顶部。原来它只滚动了一半。这是为什么？？？

*{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

html {
  scroll-behavior: smooth;
}

 a {
   color: #AEC6CF;
   underline: black;
 }

.header{
  height: 100px;
  background: #f1f1f1;
  padding: 0 20px;
  color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
.logo{
  line-height: 100px;
  float: left;
  position: fixed;
  top: 0;
  z-index: 1030;
}

.menu{
  float: right;
  line-height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
  font-size: 20px;
}

.menu a{
  color: #000000;
  text-decoration: none;
  padding: 0 10px;
  transition: 0.4s;
}
.show-menu-btn,.hide-menu-btn{
  transition: 0.4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
.show-menu-btn{
  float: right;
}
.show-menu-btn i{
  line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
  color: #AEC6CF;
}

a:link, i {
  color: black;
}

i:hover {
  color: #AEC6CF;
  transition: 0.4s;
  cursor: pointer;
}

#chk{
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

.footer {
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #f1f1f1;
  color: black;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
}

@media screen and (max-width:800px) {
  .show-menu-btn,.hide-menu-btn{
    display: block;
  }
  .menu{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #f1f1f1;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
  }
  .menu a{
    display: block;
    padding: 20px;
  }
  .hide-menu-btn{
    position: absolute;
    top: 40px;
    right: 40px;
  }
  #chk:checked ~ .menu{
    right: 0;
  }
  .footer {
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f1f1f1;
    color: black;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .header {
    height: 103.5px;
  }

  .header-info h2 {
    font-size: 20px;
    margin-top: 350px;
  }

  .header-info h1 {
    font-size: 30px;
  }
}

* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  font-family: Helvetica, sans-serif;
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: black;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1.2px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.header-container {
  width: 100%;
  position: relative;
  background-color: inherit;
  padding: 10px 40px;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #AEC6CF;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: #f1f1f1;
  position: relative;
  border-radius: 6px;
  transition: 0.4s;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

  /* Full-width containers */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Full-width containers */
  .header-container {
    width: 100%;
    padding-left: 25px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }

  /* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>

<title>lunAr-creator</title>

<div class="header" id='pronav'>
  <div class='logo' id='logo'>
    <h1>lunAr-creator</h1>
  </div>
  <input type="checkbox" id="chk">
  <label for="chk" class="show-menu-btn">
    <i class="fas fa-bars"></i>
  </label>

  <ul class="menu" id='navbar'>
    <a href="#section1" onclick="document.getElementById('chk').checked = false">Home</a>
    <a href="#section2" onclick="document.getElementById('chk').checked = false">About</a>
    <a href="#section3" onclick="document.getElementById('chk').checked = false">Timeline</a>
    <a href="#section4" onclick="document.getElementById('chk').checked = false">Projects</a>
    <a href="#section5" onclick="document.getElementById('chk').checked = false">Useful Links</a>
    <label for="chk" class="hide-menu-btn">
      <i class="fas fa-times"></i>
    </label>
  </ul>
</div>
<div style="margin-top:120px">
  <div id='section1' class="home-info">
    <h2 style='text-align:center;margin-top:350px;font-size:28px;'>Hi there. I'm lunAr-creator!</h2>
    <h1 style='text-align:center;padding-top:20px;font-size:40px;love {color:#AEC6CF}'>& I love programming</h1>
    <h3 style='text-align:center;padding-top:30px;padding-bottom:480px;'>Projects<a href="#section4"><i class="fas fa-chevron-down" style='margin-left:20px;'></i></a></h3>
  </div>
  <div class='header-container'>
    <div id="section3" class="content">
      <h2>About<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-address-card"></i></h2>
      <p>This is where i will talk about who I am and what i do :D</p>
    </div>
  </div>
  <div class='header-container'>
    <div class="content">
      <h2>Timeline<i style='margin-left:20px;color:#AEC6CF;cursor:default;padding-bottom:0px;' class="fas fa-child"></i></h2>
      <p>The stages I have been through so far with programming.</p>
    </div>
  </div>
  <br></br>
  <div class="timeline">
    <div class="container right">
      <div class="content">
        <h2>2016 - 17</h2>
        <p>I joined a Scratch coding camp where I learnt some of the foundations of programming.</p>
        <br></br>
        <p>My Dad built on the knowledge I had already aquired from the course and used C# to teach us some new concepts.</p>
      </div>
    </div>
    <div class="container left">
      <div class="content">
        <h2>2018-19</h2>
        <p>My school introduced me to HTML and CSS where i made my first website - a Minecraft handbook. I started learning Python aswell after it being recommended to me.</p>
        <p>Watched a couple of Youtube tutorials on Python, started applying them to small programs and building up my skills.</p>
        <br></br>
        <p>Made my first (text-based) game called '9-lives'. Used the book: 'Python in easy steps' to help me understand the logic behind it.</p>
      </div>
    </div>
    <div class="container right">
      <div class="content">
        <h2>2020</h2>
        <p>Had lots of spare time on my hands due to Covid. Made some projects such as pong, a simple email client using smtplib, tkinter for the UI and made my second website.</p>
        <br></br>
        <p>Developed and hosted (and is still hosting) a website for a youth group. I used HTML, CSS and a little Javascript to accomplish this.</p>
        <a style='color: #AEC6CF' href="https://a-town-youth.netlify.app">Click here to visit the youth group website</a>
      </div>
    </div>
    <div class="container left">
      <div class="content">
        <h2>2021</h2>
        <p>Created a text-based adventure rpg game for beginners to contribute to (including me). In my opinion it improved my team-working/collaboration skills and helped me learn some new concepts looking at other people code.</p>
        <br></br>
        <p>Joined GitHub :D </p>
        <a style='color: #AEC6CF' href="https://github.com/lunAr-creator">Click here to visit my GitHub</a>
        <br></br>
        <p>Made my first library (pw-gen) for generating strong randomised passwords.</p>
      </div>
    </div>
  </div>
  <br></br>
  <div id='section4' class='header-container'>
    <div class="content">
      <h2>Projects<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-code-branch"></i></h2>
      <p>All of my projects are up on my GitHub profile so be sure to check them out</p>
    </div>
  </div>
  <div id='section5' class='header-container'>
    <div class="content">
      <h2>Useful Links<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-link"></i></h2>
      <p>Links to websites and resources that I find helpful whilst I am programming</p>
    </div>
  </div>
  <div id='section6' class='header-container'>
    <div class="content">
      <h2>Contact<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-pen"></i></h2>
      <p>Contact me here for information or collaboration requests</p>
    </div>
  </div>
  <div class='footer'>
    <a href="https://github.com/lunAr-creator"><i class="fab fa-github" style='font-size:30px;margin-right:20px;'></i></a>
    <a href="https://stackoverflow.com/users/15277679/lunar-creator?tab=profile"><i class="fab fa-stack-overflow" style='font-size:30px'></i></a>
    <br></br>
    <p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
  </div>
</div>
</body>
</html>

标签： htmlcsssmooth-scrolling