如何让锚点链接实现平滑滚动？（仅用HTML/CSS）

问题出在滚动容器的定位上：你把scroll-behavior: smooth加在了html元素，但页面实际的滚动是由.container触发的——这个元素设置了height:100vh和overflow-y: auto，成为了独立的滚动容器，根元素（html/body）并没有滚动行为。

修复步骤： #

1. 将scroll-behavior: smooth从html选择器移到.container选择器中
2. 移除body的height:1000vh（该设置多余，且会干扰滚动逻辑）
3. 修正原CSS里的笔误：.logo的right:20spx改为right:20px

修改后的CSS代码： #

body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

section {
  font-size: 2rem;
  background-color: #333;
  padding: 40px;
  color: blueviolet;
}

.container {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
  scroll-behavior: smooth; /* 把平滑滚动设置到实际滚动容器上 */
}

header {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  z-index: -1;
}

.background {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
  transform: translateZ(-10px) scale(2);
  filter: brightness(70%);
}

.logo {
  position: relative;
  right: 20px;
  top: 10px;
}

.title {
  z-index: 1;
  color: rgb(255, 255, 255);
  font-size: 120px;
  font-family: 'Nunito';
  position: relative;
  top: 15%;
  left: 10%;
  width: 400px;
}

.subText {
  z-index: 1;
  color: rgb(255, 255, 255);
  font-size: 25px;
  font-family: 'Nunito';
  position: relative;
  top: 13%;
  left: 10.5%;
  width: 700px;
}

.learnMore {
  background-color: white;
  width: 200px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: relative;
  top: 17%;
  left: 10%;
  color: black;
  font-family: 'Nunito';
}

.learnMore:hover {
  background-color: gray;
}

原HTML代码（无需修改）： #

<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">

<div class="container">
  <header>
    <img src="images/discover.jpg" alt="Not Loading" width="1470px" height="800px" class="background">
    <img src="images/logo.png" alt="Not Loading" class="logo" width="400px" height="75px">
    <div class="title">DISCOVER</div>
    <div class="subText">Find Your Dream House From The Relaxation Of Your Couch</div>
    <a href="#text">
      <div class="learnMore">
        <h3>Learn More</h3>
      </div>
    </a>
  </header>
  <section id="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas vero numquam rem? Delectus nostrum eveniet possimus hic expedita at magni quos corrupti. Facilis sed architecto eveniet natus iusto incidunt quis tenetur deserunt excepturi odit ipsa molestias
    eaque similique, commodi numquam, quod explicabo hic nesciunt repellendus necessitatibus voluptatibus. Consectetur quam quo dicta laudantium repudiandae, id doloribus dolorem maxime ab architecto. Quis, iusto officia. Error quasi totam dolorem quo
    animi pariatur voluptatum impedit, laboriosam optio eius, ut quibusdam voluptatem, aut id rem quidem quaerat deserunt esse. Facilis veniam architecto quod dolor facere corporis ratione iusto fugiat, esse, tenetur porro reiciendis quam odit quidem
    non aperiam rerum officiis maxime quasi id voluptatum. Culpa, doloremque suscipit est fuga cupiditate iusto ab assumenda error quaerat in! Praesentium iste ut architecto temporibus, possimus cupiditate? Repellendus minima quibusdam accusantium. Commodi
    impedit officiis sequi atque dolores maiores repudiandae labore officia. Illo ea consequatur ipsum, necessitatibus quia assumenda vel non fuga voluptatem rerum natus? Velit ipsum veritatis adipisci maiores suscipit tempora sint, nostrum dignissimos
    dolores fugit in vero est aliquid nemo minus, perferendis esse enim. Molestias facere debitis quas reiciendis deserunt. Necessitatibus veritatis facilis consequuntur consequatur ipsum temporibus assumenda, nihil similique neque sunt, molestias itaque
    debitis laudantium cum distinctio beatae doloribus ab impedit quas aspernatur at soluta. Accusantium saepe dolore iure eos possimus unde quia maxime fugit nobis dolorem, ipsam quidem perspiciatis odit repellendus excepturi nesciunt perferendis eveniet
    magnam eaque! Distinctio, atque! Laudantium libero eum necessitatibus iste facilis, consequuntur officia error inventore quo molestias recusandae accusamus quam cupiditate quibusdam doloribus eaque aliquam animi quisquam impedit optio praesentium
    voluptate, sunt ab? Maiores nam voluptas ipsa inventore iste fugiat minus hic a dignissimos facere voluptate suscipit, magnam id! Iusto magni possimus animi reiciendis, corrupti iste natus reprehenderit commodi quia eum veritatis maxime corporis ad
    distinctio accusamus voluptate laudantium blanditiis. Asperiores, nobis.
  </section>
</div>

内容的提问来源于stack exchange，提问作者Ethan Suwan