我对 html/css 编码还很陌生，我不知道如何默认禁用滚动（打开页面时）并在用户单击图标后再次激活它。 图标本身会使页面向下滚动到“简介”div。
一个不错的好处是，如果用户再次向上滚动并且只显示起始 div，则它应该再次禁用，直到单击该图标。
HTML/CSS 是首选，因为我还没有学过 JavaScript，并且不想使用我不理解的东西。如果没有就不可能，那就没问题。
我已经尝试了网上找到的 90% 的解决方案，但我猜要么是 javascript 的嵌入不起作用，要么是代码本身不适用于我的 html/css 代码。
这是我的html代码片段：
</head>
<body>
<header>
<h1 class="blur-in">Welcome, take your time.</h1><br>
<div class="activateScroll">
<a href="#fixedNavbar"><i class="fa-solid fa-chevron-down fa-2x slide-in"></i </a>
</div>
</header>
<main>
<div id="fixedNavbar">
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">skills & work</a></li>
<li><a href="">about me</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</div>
<section>
<div class="introduction">
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>
** 相关 CSS 代码（任何有帮助的内容） **
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Libre Franklin';
}
html, body {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
}
.start {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
#fixedNavbar {
position: sticky;
top: 0;
width: 100%;
z-index: 100;
}
使用一些 hacky CSS 可能可以实现这一点，但这 100% 是 JavaScript 的工作。
查看此处的 CodePen，如果您有任何疑问，请告诉我：https://codepen.io/vince1444/pen/vYbLLEv
<section id="hero">
<header>
<h1>Hero Section</h1>
<a href="#about" id="about-anchor">Click to go to the about section</a>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, quis sequi nam labore dignissimos ullam minima voluptatibus fugiat facere accusantium. Repellat cupiditate eveniet velit aliquid ut iusto asperiores facere! Mollitia, quae adipisci ea rerum amet suscipit quod deleniti repudiandae quia eaque? Illo maiores, illum eveniet corporis odio corrupti saepe quos sequi nulla. Voluptates at iste sit officia id eveniet aut explicabo expedita odit! Sequi nulla cumque adipisci temporibus facilis, voluptas dicta nam natus provident libero impedit aliquam dolorum molestiae eligendi necessitatibus iure quaerat odit esse numquam quia. Suscipit odio ratione iste natus architecto temporibus harum voluptas ab sapiente hic voluptatum aliquid vel, perspiciatis esse mollitia consequatur, saepe vero placeat molestiae praesentium libero. Omnis quis incidunt harum sit natus facere id beatae ullam in hic, illo nisi blanditiis deleniti inventore deserunt voluptas suscipit animi rerum magni cum non nobis facilis? Laboriosam sit perspiciatis, ipsam voluptate inventore quibusdam nulla modi, libero, at minus adipisci culpa quidem eaque facilis id optio sequi quisquam iure tempora distinctio delectus illum itaque? Quidem sequi expedita voluptatibus officiis aperiam eaque ab nisi porro. Quod deserunt eum voluptas perspiciatis facere optio minima aliquid sint saepe vero eos amet atque doloribus, eligendi illo ut quis, veniam nostrum qui iste hic quas commodi. Delectus, dolore! Voluptatem, nostrum ullam. Aperiam vitae deserunt quas quos unde maiores quod! Distinctio dolorem adipisci molestias tenetur consectetur praesentium eius quisquam eaque harum! Sunt, sed, quo iure nobis impedit quaerat, quam ducimus molestiae id alias incidunt quod deserunt labore architecto quia vel earum soluta. Sit, excepturi illum quasi sequi ea corporis voluptatibus voluptas maiores quidem corrupti quod veritatis veniam! Quos rerum fugiat error, quidem quasi necessitatibus laborum. Nam dolorem natus, ipsa dolor voluptatum saepe recusandae! Possimus sapiente dolore est, consequuntur blanditiis adipisci nihil veritatis commodi quidem error? Dicta accusamus corporis ipsam aut qui, unde necessitatibus! Molestiae fugiat modi ducimus laborum aliquid dolore quod, aliquam ipsam excepturi culpa qui. Deserunt provident, dolore, maiores aliquam accusantium nesciunt libero esse accusamus repudiandae numquam repellat asperiores molestiae temporibus earum, alias quidem! Aspernatur distinctio ea amet consequatur blanditiis, quasi nobis quae facilis assumenda quod a! Nulla excepturi, nam fugit a, expedita exercitationem commodi optio autem iste omnis doloremque ad facere ab. Repudiandae dicta magnam itaque esse dolores et est explicabo sed culpa, deserunt consequuntur, sequi officiis ex, quae iste eveniet odio commodi laborum. Fugiat at qui iure consectetur eaque necessitatibus non quod laboriosam vero, accusantium voluptatum explicabo in ad. Ducimus obcaecati dolores eligendi. Sed explicabo sunt repudiandae. Vero minus tenetur illum consectetur blanditiis. Voluptatem quo praesentium tempora laboriosam accusantium est nulla deserunt rerum, illo explicabo repudiandae optio reiciendis corrupti repellendus, sunt, provident saepe maxime beatae sit nihil ipsam consequuntur? Similique nam iste magni laborum doloremque vero id iure ad amet, consequuntur iusto animi dolor voluptates quisquam labore maxime dolorem tempore numquam accusantium esse officiis aut ducimus! Tempore nesciunt, porro officiis eligendi necessitatibus quod magnam repudiandae exercitationem esse eveniet rerum harum modi quas hic voluptate ab est quae! Consequuntur praesentium aliquam ex iusto cupiditate quaerat velit accusamus. Unde voluptatum labore quod sit ullam eius ab harum, ea sed praesentium doloribus molestias recusandae eligendi non quam exercitationem sint explicabo ipsam excepturi dicta consequuntur veniam. Nemo repellat neque provident ducimus accusantium sit saepe expedita nulla aut quasi! Temporibus minus expedita voluptatum perferendis repudiandae vitae sint possimus excepturi, omnis dicta provident, doloremque animi in qui sapiente odio. Consequuntur aspernatur reprehenderit ipsam, ad enim laborum dignissimos deserunt hic perferendis facere similique possimus dolorum rerum quis architecto dolorem quo dicta eius fugiat laudantium vero quas? Cumque, officiis impedit laborum doloribus quidem tempore amet reprehenderit eveniet molestias et, necessitatibus autem architecto repudiandae at ipsum debitis in labore molestiae asperiores eos nihil eaque illum assumenda doloremque. Minus cumque impedit optio debitis voluptate excepturi sed incidunt molestias, sit quod corrupti mollitia aperiam! Repudiandae in rerum dignissimos reprehenderit sit minima pariatur unde fugiat eveniet assumenda alias neque, quo sapiente temporibus aliquam error nihil dolore quasi beatae quod inventore laboriosam eum, a sunt. Ipsa hic a ab incidunt unde dicta accusantium accusamus quod ducimus quidem ullam repellendus sequi dolorem explicabo ex, cumque tenetur amet blanditiis nam? Autem earum nostrum laudantium dolores quam repellendus quos quibusdam, voluptas qui provident ab voluptatem? Debitis nobis explicabo beatae earum ullam nam a modi velit totam eius corporis cum, fugit, quos vitae dolore illo quo ipsam excepturi sunt quisquam reprehenderit! Odio distinctio cum quae eos sed, totam necessitatibus architecto animi sit molestias! Commodi libero, et ipsum nesciunt tempore ducimus eum deserunt? Obcaecati vero odio culpa nobis sapiente facere dicta ad doloribus fugit iusto officiis rerum laudantium architecto delectus tenetur commodi animi eos, cumque quae consequuntur unde laboriosam provident beatae molestiae. Labore cumque excepturi, est neque sed, odio fugit ullam voluptate consequuntur alias itaque voluptatem omnis illo deleniti ipsa, ducimus cum voluptatibus autem hic minus vel fugiat eaque ea! Sapiente, esse saepe tenetur doloribus modi placeat, qui autem delectus dolorem mollitia magnam nam maxime perspiciatis perferendis necessitatibus, culpa cum deleniti quas quidem minus minima ad accusantium. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor.
</p>
</section>
<section id="about">
<header><h2>About Section</h2></header>
<p>Hello, world!</p>
</section>
body {
overflow-y: hidden;
}
const body = document.body; // selects the body tag
const aboutAnchor = document.querySelector("#about-anchor"); // selects our anchor tag with id of about-anchor
// adds an event listener to our about-anchor which listens
// for a click event (when the user clicks on the anchor)
aboutAnchor.addEventListener("click", (event) => {
// sets the inline styling of the body tag
// equivalent to setting overflow-y: auto in CSS
body.style.overflowY = "auto";
});
// adds an event listener to the Window global object
// that checks fires a function whenever a user scrolls
window.addEventListener("scroll", (event) => {
// if the user is at the top of the page
if (window.scrollY === 0) {
body.style.overflowY = "hidden";
}
});