Ссылка на раздел на странице сайта

Question

У меня есть меню, которое ссылается на разделы веб-страницы, я хочу, чтобы ссылка шла в заголовок, но она доходит до конца раздела, что создает впечатление, что он собирается раздел ниже. Я попробовал это несколькими способами, вот первый способ;

<div class="sidebar" style="margin-top: -315px;"> 
        <div class="list-group"> 
         <a href="Index.aspx#WhatIsIt" class="list-group-item active">What is it?</a> 
         <a href="Index.aspx#Why" class="list-group-item">Why Evercam?</a> 
         <a href="Index.aspx#API" class="list-group-item">API</a> 
         <a href="Index.aspx#Pricing" class="list-group-item">Pricing</a> 
         <a href="MarketPlace.aspx" class="list-group-item">MarketPlace</a> 
        </div> 
       </div> 

    <section id="WhatIsIt"> 
        <div class="row featurette"> 
         <div class="col-md-4"> 
          <i class="icon-camera-retro icon-large"></i> 
         </div> 
         <div class="col-md-8" style="margin-left: -55px"> 
          <h2 class="featurette-heading smalltopmargin">What is Evercam?<span class="text-muted">An ideal camera.</span></h2> 
          <p class="lead"> 
           Evercam makes it easy to interact with IP Cameras. Evercam abstracts the complexity of any IP-based video device, and exposes all its available functionality to you 
          through a consistent and beautiful <a href="/Develop.aspx">API</a>. 
          </p> 
         </div> 
        </div> 
       </section> 

Это второй способ;

<div class="terms"> 
       <h3>Index</h3> 
       <h5><a href="Termsandconditions.aspx#yourrights">Your rights</a></h5> 
       <h5><a href="Termsandconditions.aspx#cookies">Cookies</a></h5> 
       <h5><a href="Termsandconditions.aspx#changes">Changes</a></h5> 
       <h5><a href="Termsandconditions.aspx#ordering">Ordering</a></h5> 
       <h5><a href="Termsandconditions.aspx#license">License</a></h5> 
       <h5><a href="Termsandconditions.aspx#siteusage">Site usage</a></h5> 
       <h5><a href="Termsandconditions.aspx#ownership">Ownership of information</a></h5> 
       <h5><a href="Termsandconditions.aspx#accuracyofinfo">Accuracy of information</a></h5> 
       <h5><a href="Termsandconditions.aspx#pricing">Pricing liability</a></h5> 
      </div> 
      <h3><a name="yourrights"></a>Your rights</h3> 

Любые идеи о том, как это решить?

Answer 1

атрибут ID может быть использован для создания якоря в начальном теге любого элемента (включая элемент).

Ref: http://www.w3.org/TR/html4/struct/links.html#h-12.2.3

Так что ваше решение кажется правильным. Я думаю, что может произойти что-то еще (браузер не может прокрутить до желаемого местоположения, маржа/заполнение идет не так), что испортит прокрутку.

Answer 2

Вы можете использовать следующее: < имя = "AnchorName" HREF = "# anchorName2> </а>

<a name="first" href="#forth" class="tall red"></a> 
<a name="second" class="tall blue"></a> 
<a name="third" class="tall green"></a> 
<a name="forth" class="tall purple"></a> 

Якорь будет прыгать в любой < а> тег имеет то имя

.

Here's a fiddle.

Answer 3

Может ли это «контейнерный класс» влиять на ссылки?

.container { 
    padding-right: 225px; 
    padding-left: 30px; 
    margin-right: auto; 
    margin-left: auto; 
}