【发布时间】：2021-09-18 01:40:44
【问题描述】：
当我向下滚动到页面底部后单击 btnAbout 链接时，我需要 <div a id="contentAbout"> 的内容完全显示，但是当单击链接时，页面跳回顶部，内容的顶部隐藏在 <header> 元素后面（几行），该元素始终保持在页面顶部的位置（根据 css 中的 position: sticky;）。我需要contentAbout div 的顶部显示在标题下。我使用纯 javascript 在单击链接或按钮时显示每个 div 块。无论它是带有指向同一页面上 div 的锚的链接，还是没有锚链接的按钮，它只是执行 javascript 以显示块，都会出现此问题。我相信问题在于css，但不确定在哪里或研究什么来解决这个问题。使用 Chrome。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./style.css" type="text/css" rel="stylesheet" />
<script src="./script.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div id="content-wrapper">
<header>
<nav class="nav">
<h1><a href="index.html">website name</a> | <span id="contentHeading"></span></h1>
<a href="index.html#contentAbout" id="btnAbout" name="btnNav" value="about"
onclick="contentAbout();">about</a>
<input type="button" id="btnPortfolio" name="btnNav" value="portfolio" onclick="contentPortfolio();" />
<input type="button" id="btnResume" name="btnNav" value="resume" onclick="contentResume();" />
<input type="button" id="btnContact" name="btnNav" value="contact" onclick="contentContact();" />
<input type="button" id="btnBlog" name="btnNav" value="blog" onclick="contentBlog();" />
</nav>
</header>
<main>
<div id="hidden"></div>
<div a id="contentAbout">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et pariatur doloribus nemo temporibus dolor
earum iure. Consequuntur consectetur inventore aperiam quae sed, quis doloremque fugit iste placeat
dignissimos fuga, saepe nemo, maiores ipsum aliquid voluptas? Ut ea ex iusto. Asperiores eligendi
assumenda corporis aspernatur laborum animi quas impedit. Molestias quos fugit, exercitationem sequi
blanditiis, dolores maxime numquam illo nesciunt delectus nihil quis est quia sit facilis quod. Officia
ipsam minima voluptatibus distinctio esse cum repellendus obcaecati? Tempore consectetur blanditiis
alias sequi aspernatur sunt architecto recusandae ratione, numquam aperiam quasi sit asperiores delectus
praesentium minima quo voluptates nihil reprehenderit. Fugiat nulla assumenda laudantium reiciendis
enim? Ut iste, magni voluptates, aut quo earum obcaecati nemo voluptas enim nam voluptatem impedit vero
debitis quasi similique. Nam eveniet est aperiam magni odit necessitatibus architecto a nobis deleniti
saepe quas fugit numquam sed cumque, culpa molestias ratione temporibus exercitationem, ex sapiente!
Optio iste laboriosam dolores repellat eveniet, id enim rem provident porro est corporis minima nulla
mollitia ex cum quidem neque? Omnis quas tempora vel odio. Commodi, reiciendis iure! Voluptatibus,
sequi. Impedit ad sed est aperiam laboriosam eligendi veniam nobis perspiciatis optio labore sapiente
cum quos tenetur minus, ipsam ducimus quod eius eum qui. Aut tempora, excepturi dignissimos delectus
voluptate consequatur qui! Consequatur, saepe modi quo, ipsam sunt eum tempora aperiam, nemo tenetur
totam possimus repellendus ex minus laudantium! Accusamus fugiat id aliquam, quos eos exercitationem
dolor, officia ea officiis enim libero ab dolores adipisci eligendi iure labore nam. Nobis, totam
voluptatem! Itaque adipisci, explicabo corporis perspiciatis provident at doloremque nesciunt odio
facilis error maiores culpa nemo vitae, exercitationem dolorum facere officia sequi optio enim et alias!
Nihil suscipit delectus libero, repellendus rem quas eius neque cum vel esse tempora incidunt sed earum,
veritatis voluptate fugiat praesentium rerum perspiciatis alias voluptatibus dicta. Id debitis eos,
excepturi delectus deleniti ad omnis consequuntur reiciendis reprehenderit molestiae eligendi ratione et
ipsa, cumque similique incidunt voluptas magnam, iure quas dolorum aliquid? Quia culpa doloremque
nostrum eligendi consequatur iste similique hic qui eos illum non commodi numquam beatae deserunt, odio
facere deleniti consectetur? Enim dignissimos at dolore eum, velit, nesciunt culpa ad fugit sunt
corrupti asperiores obcaecati! Ex in molestias itaque! Autem necessitatibus modi debitis, deserunt
quisquam quasi sapiente molestiae eaque et dolores sint voluptas, amet quod sed. Eaque numquam porro
molestiae quae consequuntur commodi harum, non impedit veniam beatae vitae reiciendis, nulla aut libero!
Mollitia cupiditate, minus corporis temporibus neque quisquam itaque unde consequuntur maiores eum
pariatur esse culpa odit nobis voluptates architecto harum impedit ducimus iste earum tenetur nesciunt
veritatis! Modi officiis voluptas eaque repudiandae suscipit aut ipsa itaque. Facilis perspiciatis
eligendi a blanditiis rem earum omnis suscipit voluptate nisi minima laudantium perferendis est aperiam,
hic similique doloribus. Necessitatibus blanditiis magnam nostrum ipsa aliquid voluptates molestiae
aperiam. Ullam, consectetur, minus atque deserunt consequatur libero possimus quaerat repellat veniam
officia magni quos, est perferendis sunt cupiditate dolores nulla aspernatur iste? Quas cum, magnam
possimus eveniet quisquam sapiente vel hic sit cupiditate, recusandae iste atque quam aperiam veniam
temporibus voluptatum assumenda ut eius est odio, perspiciatis nisi commodi. Eos mollitia rem dolores
voluptatum optio nihil corrupti doloremque numquam. Iure ratione inventore eaque? Numquam ducimus id
porro tempora sapiente laborum voluptate recusandae soluta. Iste placeat ipsa officia autem sequi
consequuntur commodi, quibusdam maxime debitis facere animi temporibus pariatur veritatis molestiae enim
reiciendis tempora omnis aspernatur ea ullam atque error vel vero? Cum quibusdam, illum, quam
perspiciatis sunt earum maiores itaque est, repellendus minima et. Laboriosam, nulla facere esse nihil
ut dolore rerum odit asperiores? Quam quo amet alias sit fugiat repellendus sed, iusto voluptatibus,
assumenda nihil eaque aperiam laudantium quasi expedita error autem ullam, impedit quidem odit quas
delectus quos provident. Provident, ea iusto alias, libero qui iste voluptatum laborum saepe rerum
veniam sit dolorum, quam nemo minus ratione nesciunt eaque eius. Dolores iusto suscipit eius fuga ut
nemo libero quam, aperiam alias facere magnam, necessitatibus iure cupiditate voluptas? Ducimus nihil
assumenda quam fugit ea pariatur sint, fuga reprehenderit incidunt neque, qui animi alias iure? Harum
fuga aperiam, voluptatibus est adipisci reprehenderit quos assumenda ipsam, saepe ad nisi ut alias
molestias voluptas at facilis quod maiores ratione dolorum eos aliquid iure! Ut itaque repellat,
doloribus deleniti quaerat voluptas, cupiditate aperiam eum error sunt vel quis iusto inventore iste
sint esse. Deleniti natus impedit sunt, assumenda et atque earum minus fugiat excepturi consectetur
harum tenetur eos eum labore eaque dolorum quaerat omnis sequi maxime! Incidunt, dignissimos expedita?
Eum, non ducimus deserunt quod veritatis minus sunt animi ab nostrum dolorem impedit sint officia
tempora alias obcaecati perspiciatis hic quisquam molestias! Expedita itaque praesentium cupiditate
possimus rem earum optio natus ut. Nobis voluptatum inventore ex, laborum a voluptates dolorum ullam
corrupti, voluptatem nostrum voluptate. A error eveniet, natus veritatis illo eos accusantium labore
repudiandae exercitationem ex modi omnis eligendi mollitia dignissimos ipsam deserunt obcaecati soluta
molestias dolores rerum velit porro. Aperiam totam inventore, accusantium molestiae ex assumenda dolore
ratione molestias vel. Modi molestias harum, id distinctio labore eius deserunt rerum illo, magni esse
quis quibusdam sit sed. Nisi facilis quibusdam ullam veniam aliquam quae labore unde a, dignissimos
rerum magnam esse. Ipsam temporibus dolorum error adipisci suscipit iusto? Nemo illo velit molestias et
at esse nisi. Dolore explicabo, ut nemo earum repellendus, pariatur, inventore eligendi nobis provident
corrupti delectus! Veniam voluptate ratione deserunt modi blanditiis corporis aliquid, nisi facilis ex
similique dolorum magnam! Explicabo provident voluptatum, enim ipsam ullam adipisci amet suscipit veniam
in consectetur voluptates dolorum repellendus deleniti facilis. Debitis molestiae rem, facere eaque
doloremque perferendis voluptas sed molestias sint ipsam odit eius placeat, libero, tempora numquam
illum iure? A debitis sint in veritatis, atque adipisci distinctio quaerat eligendi cupiditate
recusandae labore quod minima tempora, voluptates fugiat! Nostrum est consequatur ullam corporis,
recusandae atque, obcaecati quibusdam totam quae similique in minus error. Voluptate unde adipisci neque
molestias illum debitis. Aliquam, assumenda? Quisquam commodi consequuntur pariatur reprehenderit minus
harum sunt labore accusantium quibusdam! Aliquid iusto quaerat architecto culpa aliquam mollitia
pariatur, assumenda nostrum suscipit fugit modi perspiciatis beatae accusantium quis voluptatum, alias
explicabo unde.
</div>
<div id="contentPortfolio">
Here are my projects.
</div>
<div id="contentResume">
My work experience.
</div>
<div a id="contentContact">
My email.
</div>
<div a id="contentBlog">
Here are blog post listings
</div>
</main>
<footer>
© all rights reserved
<div id="nav2" class="nav">
<a href="index.html#terms">[terms]</a>
<a href="index.html#privacy">[privacy]</a>
<a href="index.html#disclaimer">[disclaimer]</a>
<a href="index.html#webmaster">[webmaster]</a>
</div>
</footer>
</div>
</body>
</html>
CSS：
#content-wrapper {
margin-right: auto;
margin-left: auto;
max-width: 960px;
text-align: justify;
align-content: center;
}
header {
left: 0;
right: 0;
margin: 0 auto;
position: sticky;
text-align: center;
top: 0;
background: white;
padding-bottom: 1rem;
display: block;
}
main {
display: block;
padding-top: 1rem;
}
#contentAbout, #contentPortfolio, #contentResume, #contentContact, #contentBlog {
display: none;
}
footer {
left: 0;
right: 0;
bottom: 0;
position: fixed;
text-align: center;
background: white;
padding-bottom: 1rem;
display: block;
}
Javascript：
function contentAbout() {
if (document.getElementById("btnAbout").click) {
document.getElementById('contentHeading').innerHTML = "About";
document.getElementById('contentAbout').style.display = "block";
document.getElementById('contentPortfolio').style.display = "none";
document.getElementById('contentResume').style.display = "none";
document.getElementById('contentContact').style.display = "none";
document.getElementById('contentBlog').style.display = "none";
}
}
function contentPortfolio() {
if (document.getElementById("btnPortfolio").click) {
document.getElementById('contentHeading').innerHTML = "Portfolio";
document.getElementById('contentPortfolio').style.display = "block";
document.getElementById('contentAbout').style.display = "none";
document.getElementById('contentResume').style.display = "none";
document.getElementById('contentContact').style.display = "none";
document.getElementById('contentBlog').style.display = "none";
}
}
function contentResume() {
if (document.getElementById("btnResume").click) {
document.getElementById('contentHeading').innerHTML = "Resume";
document.getElementById('contentResume').style.display = "block";
document.getElementById('contentAbout').style.display = "none";
document.getElementById('contentPortfolio').style.display = "none";
document.getElementById('contentContact').style.display = "none";
document.getElementById('contentBlog').style.display = "none";
}
}
function contentContact() {
if (document.getElementById("btnContact").click) {
document.getElementById('contentHeading').innerHTML = "Contact";
document.getElementById('contentContact').style.display = "block";
document.getElementById('contentAbout').style.display = "none";
document.getElementById('contentPortfolio').style.display = "none";
document.getElementById('contentResume').style.display = "none";
document.getElementById('contentBlog').style.display = "none";
}
}
function contentBlog() {
if (document.getElementById("btnBlog").click) {
document.getElementById('contentHeading').innerHTML = "Blog";
document.getElementById('contentBlog').style.display = "block";
document.getElementById('contentAbout').style.display = "none";
document.getElementById('contentPortfolio').style.display = "none";
document.getElementById('contentResume').style.display = "none";
document.getElementById('contentContact').style.display = "none";
}
}
【问题讨论】：
-
嗨，有没有理由引入锚元素（它也有一个 onclick 事件监听器），还有使用输入元素而不是普通按钮元素的理由吗？顺便说一句，就定位而言，恢复到仅输入而不是锚元素似乎是正确的做法。
标签： javascript html css