锚点链接从头部固定在顶部开始

Question

我有一个页面顶部有一个固定的标题,高度为63像素.在这下面我有不同的页面部分(div),它们本质上是单独的页面.每个部分都在标题中链接,作为相关div id的锚链接.我遇到的问题是,当单击锚链接时,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代码(当主持人被点击时,应该是下面的标题:

#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;
}

•在实际div部分开始之前的HTML中,例如我#landingcontainer应该添加一个span标签,其中包含锚类(我们在上面做过)和一个你想要的id.对我来说,我这样做了:

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

然后,实际链接现在不会链接到您要将它们带到的部分的实际div ID,而是必须在链接中给出span标记的id.

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

而且你有它!

我们在这里做的实质上是让浏览器停止跨度开始的位置,这正好是标题的高度,这使得观察者不再明智;)