HTML - 链接到锚点而不页面跳转到顶部答案

【问题标题】：HTML - Link to anchor without page jumping to topHTML - 链接到锚点而不页面跳转到顶部
【发布时间】：2013-09-18 00:23:07
【问题描述】：

我有一个顶部带有固定位置标题的页面，并在页面内链接到由 id 属性指定的部分。当我链接到其中一个时，它会将部分放在页面的顶部，以便它的第一部分与标题重叠。

如何使该部分为标题留出空间？我不想只在部分 id 和部分内容之间添加 100 像素的边距，因为这会在页面上留下太多空白空间。

CSS：

#header {
    position: fixed;
    top: 0;
    height: 100px;
    left: 0;
    right: 0;

    background: #464646;
}

#content {
    margin-top: 100px;
}

HTML：

<div id = "header"> <!-- header contents --> </div>

<div id = "content">
    <a href = "#section"> Section </a>

    <!-- Content here, so that page has to scroll to reach section -->

    <h1 id = "section"> Section </h1>

    <!-- More content -->
</div>

【问题讨论】：

尝试添加 z-index:500;对于标题 id 并添加位置：相对，z-index：100；到内容 ID。

标签： html css hyperlink

【解决方案1】：

艾玛。我刚刚为您的案例创建了一个fiddle。您可以为 id 属性指定的部分设置负边距和正填充。希望我的回答对你有所帮助。

【讨论】：

很高兴听到这个消息，艾玛 :)

【解决方案2】：

你可以试试这个代码...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>A simple Input Form</title>

<style type="text/css">
body {
padding: 0;
margin: 0;
}
.nav {position:absolute; top:0px; left:0px; height:50px; right:0px;overflow:hidden;
color: #ffffff;
text-align: center;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);}
.nav ul{list-style:none;}
.nav ul li{display:inline-block;}
.nav ul li a{color:#fff; font-size:26px;}
#faq{position:absolute; top:50px; bottom:50px; left:0px; right:0px; overflow:hidden;}
</style>


</head>
<body>
<header>
   <div class="nav" style="clear:both;">
   <ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    <li><a href="#four">four</a></li>
   </ul>
   </div>
   </header>  
   <section id="faq">
   <h1 id="one">This is faq one</h1>
   <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>

   <h1 id="two">This is faq two</h1>
   <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>

   <h1 id="three">This is faq three</h1>
  <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>

   <h1 id="four">This is faq four</h1>
   <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
   </section>

</body>
</html>

【讨论】：