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

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>

但是当我点击“People”链接时，它不会正确定位，因为我正在该页面上加载一些图表。我有许多具有唯一 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。我可以看到，当我点击导航栏上的 a href="/main_page#top_something"时，它会将我粘贴到该部分，但一旦它加载 JavaScript，它就会将我移到上层

提前致谢

Answer 1

如果您的 main_page 是一个目录(它可能是)，那么您只需在 anchor 名称前包含一个斜杠即可。

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

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