锚链接从固定在顶部的标题下面开始 [英] Anchor links to start below the header which is fixed at the top

问题描述

我有一个页面，该页面的顶部固定有一个标题，高度为63px。在此下方的
我有页面的不同部分（divs），这些部分实际上是独立的页面。
每个部分都在标题中链接为指向相关div ID的锚点链接。
我遇到的问题是，单击锚链接时，div的顶部从文档的顶部开始，而不是在标题的下面。
任何解决方案的确会非常有用。

标题的CSS代码：

  #headercontainer {
位置：已固定； 
 background-color：＃1a1813; 
 top：0px; 
还剩0px； 
宽度：100％； 
高度：63像素； 
 z-index：1;} 
  

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

第一部分的CSS代码（应该是锚点被点击后的标题下方：

  #landingcontainer {
 margin-top：63px; 
位置：相对； 
宽度：100％； 
高度：700px； 
背景色：＃000000;} 
 
 #landingcontent {
位置：相对； 
宽度：1280px； 
高度：700px； 
 margin-left：auto; 
 margin-right：auto; 
 background-image：url（。 ./images/landing/landing_bg.png\"）；
背景重复：不重复； 
  

}

需要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>菜单< / li>< / a> 
< li> / li; 
< li&R; Ranches< / li> 
< li> Order< / li> 
< li> Franchise< / li> 
< li>关于< / li> 
< / ul> 
< / div> 
< div id = headersociallinks>< / div> 
< / div> 
< / div> 
<！-结束页眉内容-> 
< / div> 
<！-结束标题-> 
 
< ;!-开始着陆部分-> 
< div id = landingcontainer> 
  

解决方案

对于这个问题，我有一个更好的解决方案。 / p>

•首先，可以在CSS中创建一个类（随心所欲地调用它）

  .anchor {
 display：block; 
高度：63像素； / *这是标题的高度* / 
 margin-top：-63px; / *这也是标头高度的负值* / 
 visible：hidden; 
} 
  

•在实际div部分开始之前的HTML中，例如mine是 #landingcontainer 您应该添加一个span标签，其中包含anchor类（我们在上面进行了创建）和一个您想要的ID。对我来说，我是这样做的：

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

然后，实际链接现在将不再链接到您要获取的部分的实际div ID它们，但是必须在链接中提供span标签的ID。

 < a href =＃landing> HOME< / a> 
  

您就拥有了！

本质上，我们在这里所做的是使浏览器停止在开始跨度的位置，该跨度恰好是标题的高度，然后使查看器变得不那么明智；）

I have a page which has a fixed header at the top, which is 63px in height. below this I have different sections of the page (divs) which are in essence separate pages. Each section is linked in the header as an anchor link to the relevant div id. The problem I am having is that when the anchor link is clicked the top of the div starts right at the top of the document, rather than underneath the header. Any solution would be very helpful indeed.

CSS CODE FOR THE HEADER:

#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 CODE FOR THE FIRST SECTION (THAT SHOULD BE BELOW THE HEADER WHEN THE ANCHOR IS CLICKED:

#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 UP TO POINT NEEDED:

<!-- 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">

解决方案

Ive got an even better solution to this problem.

• Firstly in the css a class can be created (call it whatever you want)

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

• In the HTML just before your actual div section starts, for example mine is #landingcontainer you should add a span tag with the class of anchor (which we made above) and an id of whatever you want. for me I did this :

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

Then the actual link will not now be linked to your actual div id of the section you want to take them to, but rather the id of the span tag must be given in the link.

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

AND THERE YOU HAVE IT!

what we are doing here in essence is making the browser stop where the span starts which is exactly the height of the header, which then makes the viewer non the wiser ;)

这篇关于锚链接从固定在顶部的标题下面开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！