跳转到不同页面上的部分无法正常工作

Question

我有这样的导航栏：

               <ul class="dropdown-menu" role="menu">
                 <li><a href="/main_page#top_something">People</a></li>
                 <li><a href="/main_page">Main Page</a></li>
               </ul>

但是当我点击“人物”链接时，它不会正确定位，因为我正在该页面上加载一些图表。我有许多具有唯一 ID 的部分，并且内容是从 JavaScript（图表）加载的。

       <section id="top_something">
         <div class= "container">
          <h2 class="blue-headings text-center"><b>Top People</b></h2>
          <div id="div_something"></div>
         </div>
        <br>
    </section>

我在 JavaScript 中制作的 div id="div_something" 的内容... 我在具有唯一 ID 的 main_page 上有 10 个这样的 div。我可以看到，当我单击导航栏上的 href="/main_page#top_something" 时，它会将我粘贴到该部分，但一旦加载 JavaScript，它就会将我移到上方

提前致谢

Answer 1

如果您的 main_page 是一个目录（它可能是），那么您只需在锚名称前包含一个斜杠。

<a href="/main_page/#top_something">People</a>

如果您在页面加载后有 JavaScript 注入内容，那么您将被带到适当的锚点，但页面可能会移动，因为 JS 添加的附加内容会将锚点向下推到页面下方。您可以考虑在完成注入内容后使用 JS 将屏幕重新定位到适当的锚点。