在另一个页面中偏移锚点

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

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

Answer 1

我想你会像删除锚一样 <a name="march_madness"></a> 并将 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>

在另一个页面中偏移锚点

offset anchor in another page

html

css

anchor

offset