在另一个页面中偏移锚点

Question

我的主页上有一系列项目指向我网站其他页面上的锚点。用户到达正确的锚点，但锚点的前几行隐藏在辅助页面的菜单后面。我尝试了一些建议来抵消，但我似乎可以让它发挥作用。

index.shtml 子集：

  <ul>
    <li>
        <a href="/upcoming_events.shtml#march_madness" 
            title="March Madness Show">
            March Madness Show<br />
            Saturday March 11th, 2017 from 7:00 to 10:00 pm
        </a>
    </li>
    <li>
        <a href="/upcoming_events.shtml#earth_day" 
            title="Earth Day">
            Earth Day Event<br />
            Saturday April 22nd, 2017 from 7:30 to 10:00 pm
        </a>
    </li>
  </ul>

upcoming_events.shtml 子集

<p class="anchor2">
    <a name="march_madness"></a>
    <strong>
        March madness Show - Saturday March 11th, 2017 
    </strong>
    <br />
    <a class="standard_paragraph">
    <i>Presented by The Good Art Series.</i>
    </a>
</p>
<!-- Details of event -->
<p class="anchor2">
    <a name="earth_day"></a>
    <strong>
        Earth Day Event - Saturday April 22nd, 2017 
    </strong>
    <br />
    <a class="standard_paragraph">
    <i>Presented by The Good Art Series.</i>
    </a>
</p>
<!-- Details of event -->

css 子集

.anchor2 {
    vertical-align: bottom;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: normal;
    line-height: 18px;
    text-align: left;
    color: #000;
    font-weight: 900;
}

.anchor2:before { 
    display: block; 
    content: " "; 
    height: 250px;      
    margin-top: -250px;     
    visibility: hidden; 
}

我怎样才能链接到另一个页面上的锚点，而不是将事件文本的前几行隐藏在页面菜单后面？ 感谢您查看此内容。

Answer 1

我想你会像 <a name="march_madness"></a> 这样删除 acnhor 并将 id 设置为段落。

例如：

<p id="earth_day" class="anchor2">
     <strong>
       Earth Day Event - Saturday April 22nd, 2017 
     </strong>
     <br />
    <a class="standard_paragraph">
      <i>Presented by The Good Art Series.</i>
    </a>
</p>