html - anchor 链接从固定在顶部的标题下方开始

Question

我有一个页面，顶部有一个固定的标题，高度为 63 像素。在此下方我有页面的不同部分(div)，它们实际上是单独的页面。每个部分都在标题中链接为相关 div id 的 anchor 链接。我遇到的问题是，当单击 anchor 链接时，div 的顶部就从文档顶部开始，而不是在标题下方。任何解决方案都会非常有帮助。

标题的 CSS 代码:

#headercontainer{
position:fixed;
background-color:#1a1813; 
top:0px;
left:0px;
width:100%;
height:63px;
z-index:1;}

#headercontent{
position:relative;
background-image:no-repeat; 
top:0px;
left:0px;
width:1280px;
margin-left:auto;
margin-right:auto;}

第一部分的 CSS 代码(单击 anchor 时应位于标题下方:

#landingcontainer{
margin-top:63px;
position:relative;
width:100%;
height:700px;
background-color:#000000;}

#landingcontent{
position:relative;
width:1280px;
height:700px;
margin-left:auto;
margin-right:auto;
background-image:url("../images/landing/landing_bg.png");
background-repeat:no-repeat;

HTML 达到需要的程度:

<!-- START BODY CONTAINER -->
<div id="bodycontainer">
    <!-- START HEADER -->
    <div id="headercontainer">
        <!-- START HEADER CONTENT -->
        <div id="headercontent">
            <div id="headerbg">
                <a href="#landingcontainer"><div id="headerlogo"></div></a>
                <div id="headercard"></div>
                <div id="headernavigation">
                    <ul>
                        <a href="#menucontainer"><li>Menu</li></a>
                        <li>Sauces</li>
                        <li>Ranches</li>
                        <li>Order</li>
                        <li>Franchise</li>
                        <li>About</li>
                    </ul>
                </div>
                <div id="headersociallinks"></div>
            </div>
        </div>
        <!-- END HEADER CONTENT -->
    </div>
    <!-- END HEADER -->

    <!-- START LANDING SECTION -->
    <div id="landingcontainer">

Answer 1

我有一个更好的解决方案来解决这个问题。

• 首先在css 中创建一个类(随便起什么名字)

.anchor{
   display:block;
   height:63px; /* this is the height of your header */
   margin-top:-63px; /* this is again negative value of the height of your header */
   visibility:hidden;
}

• 在 HTML 中，就在您实际的 div 部分开始之前，例如我的是 #landingcontainer 您应该添加一个 span 标签，其中包含 anchor 类(我们在上面制作的)和任何 id你要。对我来说，我这样做了:

<span class="anchor" id="landing"></span>

那么实际链接现在将不会链接到您要将它们带到的部分的实际 div id，而是必须在链接中给出 span 标签的 id。

<a href="#landing">HOME</a>

就在这里!

我们在这里所做的实质上是让浏览器在 span 开始的地方停止，这恰好是标题的高度，然后让查看者变得不明智;)